Question

这是HTML：

<table id="tblTestAttributes">
    <thead>
        <tr> <th>Head 1</th> <th>Head 2</th> </tr>
    </thead>
    <tbody>
        <tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
        <tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
        <tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
    </tbody>            
</table>

这是获取每行值的javascript：

var frequencies = [];
if ($('#tblTestAttributes').length) {
    $('#tblTestAttributes tr').each(function () {
        var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
        alert(t);
        frequencies.push(t);
    });
}

我想避免第一行，其中包含th元素，这些元素只是显示标题，不包含任何数据。

所以我把选择器更改为：

#tblTestAttributes tr:not(:first-child)

这也是跳过第二个tr。这里发生了什么？

Answer 1

简单，您可以使用以下代码

$('#tblTestAttributes tr:not(:has(th))').each(function () {

Answer 2

使用

#tblTestAttributes tr:gt(0)

或

#tblTestAttributes tbody tr

我会推荐第二个，因为它可能会利用querySelectorAll并且应该是最好的解决方案。

您的方法无法按预期工作，因为第二个tr也是first-child（tbody）

Answer 3

使用tr + tr选择器，它会显示在另一个tr之后显示的所有tr，因此会跳过第一个。{/ p>

也无需检查表是否存在，因为在这种情况下$.each甚至不会被执行。

var frequencies = [];
    $('#tblTestAttributes tr + tr').each(function () {
        var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
        alert(t);
        frequencies.push(t);
    });

修改后：

只需选择tr内的所有tbody：

$('#tblTestAttributes tbody tr').each(function(){
    ...
}

Answer 4

就性能而言，使用.find()将比使用Sizzle解析选择器更好。

$('#tblTestAttributes').find('tbody').find('tr').each(function () { ... });

以下是 jsPerf 来展示它。

Answer 5

这是因为第二行实际上是tbody的第一个孩子，就像第一行是thead的第一个孩子一样。

为了只采取你需要的元素，我建议你的需求更接近：

#tblTestAttributes tr:has(td)

不要忘记删除那些重复的txtDesc id，这在HTML中是非法的，而是使用类。

jQuery：跳过第一个表行

5 个答案: