j查询表行中的每个循环

jQuery each loop in table row

本文关键字：循环 查询表      更新时间：2023-09-26

我有这样的东西：

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

我已经编写了jQuery来遍历每个tr，如下所示：

$('#tblOne tr').each(function() {...code...});

但问题是它循环通过"tblTwo"的"tr"，这也是我不想要的。任何人都可以提出一些措施来解决这个问题吗？

在 jQuery 中只需使用：

$('#tblOne > tbody  > tr').each(function() {...code...});

使用子项选择器 （ > ），您将遍历所有子项（而不是所有子代），例如三行：

$('table > tbody  > tr').each(function(index, tr) { 
   console.log(index);
   console.log(tr);
});

结果：

0
<tr>
1 
<tr>
2
<tr>

在 VanillaJS 中，您可以使用 document.querySelectorAll() 并使用 forEach() 遍历行 

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});

只是一个建议：

我建议使用 DOM 表实现，它非常简单易用，您真的不需要 jQuery 来完成此任务。

var table = document.getElementById('tblOne');
var rowLength = table.rows.length;
for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];
  //your code goes here, looping over every row.
  //cells are accessed as easy
  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];
    //do something with every cell here
  }
}

使用直系子选择器>：

$('#tblOne > tbody  > tr')

说明：选择由 "子"指定的所有直接子元素 由"父"指定的元素。

相关文章：