使用 Javascript/Jquery 循环遍历表行答案

【问题标题】：Looping through table rows with Javascript/Jquery使用 Javascript/Jquery 循环遍历表行
【发布时间】：2011-12-28 23:59:31
【问题描述】：

所以我要做的是获取 HTML 表格的最后一行。如果这一行有一个特定的类，我将忽略这一行并选择上一个。然后从表的末尾循环，直到找到没有这个特定类的行。

我认为这可能涉及到一个 for 循环、对行类的检查以及 JQuery 的 row.prev 方法，但仍然不太确定如何处理。

提前致谢！

【问题讨论】：

生成 Html 表的服务器端是什么？
使用 jQuery，它是单行的，如下所示。如果没有 jQuery，在table.rows collection 上使用 for 循环仍然只有大约三四行代码，检查类并在找到时跳出循环。

标签： javascript jquery html-table

【解决方案1】：

要获取没有特定类的最后一个表行，例如targetClass，您可以这样做：

$("tr:not(.targetClass):last");

我不确定你想对这个表格行做什么，但如果你要在最后没有它的行中添加targetClass，它看起来像这样

$("tr:not(.targetClass):last").addClass("targetClass");

查看此fiddle 以了解其实际效果

【讨论】：

【解决方案2】：

此示例向您展示如何获取当前页面上每个表格的最后一个：http://jsfiddle.net/JBnzK/

$('table').find('tr:last').each(function(){
    if ($(this).hasClass('stupid')) {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'green');
    }
});

【讨论】：

【解决方案3】：

假设您有以下 HTML：

<table id="mytable">
    <tbody>
        <tr>
            <td>1</td>
        </tr>
        <tr id="YouFoundMe">
            <td>1</td>
        </tr>
        <tr class="certainclass">
            <td>1</td>
        </tr>
        <tr class="certainclass">
            <td>1</td>
        </tr>
        <tr class="certainclass">
            <td>1</td>
        </tr>

    </tbody>
</table>

你可以这样做：

var elWithoutClass = $('#mytable tr:not(.certainclass):last');

if (elWithoutClass.length) {
    alert(elWithoutClass.get(0).id);
    // alerts "YouFoundMe"
}

:not(.certainclass) 将消除 <tr> 没有类 'certainclass'
:last 会给你最后一个

我邀请您查看 jquery 的Selectors documentation page 以了解有关它们的更多信息。

【讨论】：