This repository was archived by the owner on May 16, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 30
Expand file tree
/
Copy pathexamples.html
More file actions
219 lines (205 loc) · 5.48 KB
/
examples.html
File metadata and controls
219 lines (205 loc) · 5.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Alignment Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.column.js"></script>
<script type="text/javascript" src="../lib/jquery.text-align.js"></script>
<script type="text/javascript">
$(function() {
var myCells = $('table#example td');
myCells.nthCol(1).textAlign(',');
myCells.nthCol(2).textAlign(',');
myCells.nthCol(3).textAlign(',');
});
</script>
<style>
body {
font-family: Verdana, Arial, Sans-Serif;
font-size: 0.95em;
}
h1, h2 {
font-weight: normal;
font-family: Georgia, Times, Serif;
}
table {
padding: 0.75em;
display: inline-block;
border: 1px solid rgb(180,180,180);
border-collapse: collapse;
}
th, td {
padding: 0.1em 1.5em;
vertical-align: top;
text-align: left;
font-weight: normal;
}
thead th {
font-weight: bold;
}
thead {
border-bottom: 1px solid rgb(180,180,180);
}
tfoot {
border-top: 1px solid rgb(180,180,180);
}
table tr.highlight {
border: 2px solid rgb(100,100,100);
}
table col.highlight {
border: 2px solid rgb(100,100,100);
}
table td.highlight, table th.highlight {
border-right: 2px solid rgb(100,100,100);
border-left: 2px solid rgb(100,100,100);
}
table thead th.highlight {
border-top: 2px solid rgb(100,100,100);
}
table tfoot td.highlight {
border-bottom: 2px solid rgb(100,100,100);
}
pre {
background-color: rgb(240, 240, 240);
display: inline-block;
padding: 2em;
}
</style>
</head>
<body>
<h1>jQuery Text Alignment Plugin</h1>
<p>Imagine you have worked hard to make your tables look good, but one thing keeps bugging you; the alignment of the text in table cells. For example, you would like to align the contents of each cell on the comma character. Unfortunately, no browser supports aligning table cells on characters. This is where the <a href="http://www.bramstein.com/projects/text-align/">jQuery Text Alignment Plugin</a> comes in; it adds support for aligning text based on characters to all browsers.</p>
<p>Assuming your table looks somewhat like the one below:</p>
<table>
<colgroup>
<col/>
<col/>
<col class="highlight"/>
<col/>
</colgroup>
<thead>
<tr>
<th>Employee</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Cleese</th>
<td>16,2</td>
<td>10,12</td>
<td>1,12</td>
</tr>
<tr>
<th>Graham Chapman</th>
<td>12,8</td>
<td>16,5</td>
<td>14,6</td>
</tr>
<tr class="highlight">
<th>Terry Gilliam</th>
<td>14,21</td>
<td>8,3</td>
<td>1,5</td>
</tr>
<tr>
<th>Eric Idle</th>
<td>18</td>
<td>3,14</td>
<td>0,571</td>
</tr>
<tr>
<th>Terry Jones</th>
<td>9,32</td>
<td>12,85</td>
<td>1,4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>70,53</td>
<td>50,91</td>
<td>19,191</td>
</tr>
</tfoot>
</table>
<p>The following code example shows how to use the <a href="http://www.bramstein.com/projects/column/">jQuery column cell selector</a> and the <a href="http://www.bramstein.com/projects/text-align/">jQuery text alignment</a> plugins to select the cells of the last three columns and align them on the comma character.</p>
<code>
<pre>
var myCells = $('table#example td');
myCells.nthCol(1).textAlign(',');
myCells.nthCol(2).textAlign(',');
myCells.nthCol(3).textAlign(',');
</pre>
</code>
<p>Alternatively, you could also use the column selector, which is slightly less efficient, but nonetheless a valid way of selecting all three columns. It is however a good idea to get into the habit of re-using elements you have previously selected, as seen in the above example.</p>
<code>
<pre>
$('table#example td:nth-col(1)').textAlign(',');
$('table#example td:nth-col(2)').textAlign(',');
$('table#example td:nth-col(3)').textAlign(',');
</pre>
</code>
<p>Both ways will result in the following table:</p>
<table id="example">
<colgroup>
<col/>
<col/>
<col class="highlight"/>
<col/>
</colgroup>
<thead>
<tr>
<th>Employee</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Cleese</th>
<td>16,2</td>
<td>10,12</td>
<td>1,12</td>
</tr>
<tr>
<th>Graham Chapman</th>
<td>12,8</td>
<td>16,5</td>
<td>14,6</td>
</tr>
<tr class="highlight">
<th>Terry Gilliam</th>
<td>14,21</td>
<td>8,3</td>
<td>1,5</td>
</tr>
<tr>
<th>Eric Idle</th>
<td>18</td>
<td>3,14</td>
<td>0,571</td>
</tr>
<tr>
<th>Terry Jones</th>
<td>9,32</td>
<td>12,85</td>
<td>1,4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>70,53</td>
<td>50,91</td>
<td>19,191</td>
</tr>
</tfoot>
</table>
<p>Note that cells without the align character are aligned as if they ended with the character. The text as a whole is aligned according to the inherited text alignment property (left in this case.) More details and API documentation can be found on the <a href="http://www.bramstein.com/projects/text-align/">jQuery text alignment plugin website</a>.</p>
</body>