DOM遍历方法
为标题行添加样式
$(document).ready(function(){
$('th').parent().addClass('table-heading');
$('tr:not([th]):odd').addClass('odd');
$('tr:not([th]):even').addClass('even');
});
取得某一行的其他所有单元格
1.取得包含Henry的单元格,然后取得该单元格的所有同辈元素
$('tr:contains("henry")').siblings().addClass('height');
2.取得包含Henry的单元格,再取得他的父元素,然后找到该元素中包含的所有编号大于0的单元格(:gt 选择器选取 index 值高于指定数的元素)
$('td:contains("henry")').parent().find('td:gt(0)').addClass('height');
3.取得包含Henry的单元格,再取得他的父元素,找到该元素中包含的所有单元格,然后过滤这些单元格排除包含Henry的那一个
$('td:contains("henry")').parents().find('td').not(':contains("henry")').addClass("height");
4.取得包含Henry的单元格,再取得他的父元素,找到该元素包含的子元素中的第2个单元格,添加类,取消最后一次.find(),再查找该元素包含的子元素中的第3个单元格,添加类
$('td:contains("henry")').parent().find('td:eq(1)').addClass('height').end().find('td:eq(2)').addClass('height');
表格源码:
<table>
<tr>
<th>Title</th>
<th>Category</th>
</tr>
<tr>
<td>As you like it</td>
<td>comedy</td>
</tr>
<tr>
<td>All's well that ends well</td>
<td>comedy</td>
</tr>
<tr>
<td>hamlet</td>
<td>tragedy</td>
</tr>
<tr>
<td>mschrth</td>
<td>tragedy</td>
</tr>
<tr>
<td>romeo and juliet</td>
<td>tragey</td>
</tr>
<tr>
<td>herry part</td>
<td>history</td>
</tr>
<tr>
<td>henry</td>
<td>history</td>
<td>hkh</td>
<td>lmy</td>
</tr>
</table>