刚开始学Jquey之一----table的小操作（我是菜鸟不要鄙视我啊）
Jquery可以算自己留着以后不用再百度查了，仅仅是刚刚学习了一点表格的操作
仅仅包含隔行变色，，有“henry”字符单元格的变化表格头部的样式变化，当鼠标放上时的特效。
可以算自己留着以后不用再百度查了，仅仅是刚刚学习了一点表格的操作
仅仅包含隔行变色，，有“henry”字符单元格的变化表格头部的样式变化，当鼠标放上时的特效。
以下是html的代码，毫无新意。。。
Code1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2
<HTML>3
<HEAD>4
<TITLE> New Document </TITLE>5
<META NAME="Generator" CONTENT="EditPlus">6
<META NAME="Author" CONTENT="">7
<META NAME="Keywords" CONTENT="">8
<META NAME="Description" CONTENT="">9
<script src="jquery.js" type="text/javascript"></script>10
<script src="pope.js" type="text/javascript"></script>11
<link href="style.css" rel="stylesheet" type="text/css"/>12
</HEAD>13
14
<BODY>15
<table id="large" cellspacing="0">16
<thead>17
18
<tr>19
<th>Email</th>20
<th>Id</th>21
<th>Phone</th>22
<th>Total</th>23
<th>Ip</th>24
25
<th>Url</th>26
<th>Time</th>27
<th>ISO Date</th>28
<th>UK Date</th>29
</tr>30
</thead> 31
<tbody>32
<tr>33
34
<td class="hover">devo@flexomat.com</td>35
<td>66672</td>36
<td>941-964-8535</td>37
<td>$2482.79</td>38
<td>172.78.200.124</td>39
40
<td>http://gmail.com</td>41
42
<td>15:10</td>43
<td>1988/12/14</td>44
<td>14/12/1988</td>45
</tr>46
47
<tr>48
<td class="hover">henry@mountdev.net</td>49
50
<td>35889</td>51
<td>941-964-9543</td>52
<td>$2776.09</td>53
<td>119.232.182.142</td>54
<td>http://www.gmail.com</td>55
<td>3:54</td>56
57
<td>1974/1/19</td>58
<td>19/1/1974</td>59
</tr>60
61
<tr>62
<td class="hover">christian@reno.gov</td>63
<td>60021</td>64
65
<td>941-964-5617</td>66
67
<td>$2743.41</td>68
<td>167.209.64.181</td>69
<td>http://www.dotnet.ca</td>70
<td>10:58</td>71
<td>2000/3/25</td>72
73
<td>25/3/2000</td>74
75
</tr>76
77
<tr>78
<td class="hover">muffins@donuts.com</td>79
<td>17927</td>80
<td>941-964-9511</td>81
82
<td>$2998.18</td>83
<td>210.214.231.182</td>84
85
<td>http://google.se</td>86
<td>21:22</td>87
<td>1993/1/24</td>88
<td>24/1/1993</td>89
90
</tr>91
92
<tr>93
<td class="hover">muffins@reno.gov</td>94
95
<td>76375</td>96
<td>941-964-2757</td>97
<td>$1836.09</td>98
99
<td>220.222.93.171</td>100
<td>http://www.samba.org</td>101
<td>15:22</td>102
103
<td>1988/4/4</td>104
<td>4/4/1988</td>105
</tr>106
107
108
<tr>109
<td class="hover">mendez@gmail.com</td>110
<td>45834</td>111
<td>941-964-2575</td>112
113
<td>$2805.46</td>114
<td>228.170.245.253</td>115
116
<td>http://flexomat.com</td>117
<td>11:31</td>118
<td>1975/12/12</td>119
<td>12/12/1975</td>120
121
</tr>122
123
<tr>124
125
<td class="hover">dev@gmail.com</td>126
<td>20022</td>127
<td>941-964-4967</td>128
<td>$3296.54</td>129
<td>175.248.70.240</td>130
131
<td>http://www.flexomat.com</td>132
133
<td>4:27</td>134
<td>2002/7/3</td>135
<td>3/7/2002</td>136
</tr>137
138
<tr>139
<td class="hover">foo@polyester.se</td>140
141
<td>55977</td>142
<td>941-964-745</td>143
<td>$2953.73</td>144
<td>222.114.227.156</td>145
<td>http://www.donuts.com</td>146
<td>23:49</td>147
148
<td>1977/8/4</td>149
<td>4/8/1977</td>150
</tr>151
152
<tr>153
<td class="hover">adam@aftonbladet.se</td>154
<td>38867</td>155
156
<td>941-964-6302</td>157
158
<td>$1949.27</td>159
<td>116.241.143.196</td>160
<td>http://flexomat.com</td>161
<td>23:35</td>162
<td>1995/7/27</td>163
164
<td>27/7/1995</td>165
166
</tr>167
168
<tr>169
<td class="hover">devo@donuts.com</td>170
<td>51426</td>171
<td>941-964-1234</td>172
173
<td>$1067.00</td>174
<td>88.96.149.82</td>175
176
<td>http://www.polyester.se</td>177
<td>15:17</td>178
<td>1986/1/5</td>179
<td>5/1/1986</td>180
181
</tr>182
183
<tr>184
<td class="hover">henry@samba.org</td>185
186
<td>40859</td>187
<td>941-964-4856</td>188
<td>$3401.19</td>189
190
<td>68.152.250.74</td>191
<td>http://www.flexomat.com</td>192
<td>4:36</td>193
194
<td>1990/3/7</td>195
<td>7/3/1990</td>196
</tr>197
198
199
<tr>200
<td class="hover">found@dotnet.ca</td>201
<td>23986</td>202
<td>941-964-2686</td>203
204
<td>$1393.52</td>205
<td>98.102.181.138</td>206
207
<td>http://lostnfound.org</td>208
<td>5:51</td>209
<td>1993/7/22</td>210
<td>22/7/1993</td>211
212
</tr>213
214
<tr>215
216
<td class="hover">carl@fish.org</td>217
<td>73392</td>218
<td>941-964-5792</td>219
<td>$3876.04</td>220
<td>246.234.182.243</td>221
222
<td>http://www.google.se</td>223
224
<td>6:52</td>225
<td>1984/7/14</td>226
<td>14/7/1984</td>227
</tr>228
229
<tr>230
<td class="hover">found@mountdev.net</td>231
232
<td>03519</td>233
<td>941-964-1599</td>234
<td>$1176.48</td>235
<td>104.212.122.177</td>236
<td>http://donuts.com</td>237
<td>18:52</td>238
239
<td>2000/8/6</td>240
<td>6/8/2000</td>241
</tr>242
243
<tr>244
<td class="hover">lost@fish.org</td>245
<td>36628</td>246
247
<td>941-964-5975</td>248
249
<td>$822.23</td>250
<td>153.63.68.208</td>251
<td>http://www.gmail.com</td>252
<td>7:53</td>253
<td>1994/7/14</td>254
255
<td>14/7/1994</td>256
257
</tr>258
259
260
</tbody>261
</table>262
</BODY>263
</HTML>264
在下面是 CSS的代码依然很烂。
Codetable{
border: 1px solid #000; width: 100%
}
table tr{
height: 60px;
}
table tr td{
padding: 4px;
}
.odd{ background: #F5DEB3;
}
.even{ background: #D2B48C;
}
.highlight{
font-weight: bolder;
}
.thbg{
background: #FF2B2B;
}
.over{
background: #4FC582;
}
.good{
font-style: italic; color: Blue;
}
最后是主要的jquery JS代码了
Code$(document).ready(function(){
$('table#large tr:odd').addClass('odd');
//奇偶行的隔行变色
$('table#large tr:even').addClass('even');
//奇偶行的隔行变色
$('td:contains("henry")').addClass('highlight');
//有“henry”字符单元格的变化
$('td:contains("henry")').next().addClass('good');
//有“henry”字符下一个单元格的变化
$('td:contains("henry")').siblings().addClass('good');
//有“henry”字符同级单元格的变化
//$('tr:contains("henry")').next().addClass('good');
//有“henry”字符下一行的变化
$('table#large thead th').addClass('thbg');
//表格头部的样式变化
$('table#large tr').hover(function(){
//当鼠标放上时的特效
$(this).addClass("over");
},
function(){
//当鼠标移出时的操作
$(this).removeClass("over");
//鼠标移出时取消背景色
}
);
//当鼠标放上时的特效结束
});
下面开始学习一些table的高级操作了，排序等等。。
