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>

posted @ 2016-02-08 21:22  lmy2016  阅读(458)  评论(0编辑  收藏  举报