jQuery：选择每个行中的每个单元格

Question

我需要一种与tr中的每个td元素交互的方法。

具体来说，我希望访问第一行的第一列，然后是第二列，以此类推。 然后转到第二行并重复该过程。

类似这样的伪代码：

for each row in table
{
  for each column in row
  {
    do cool things
  }
}

jQuery：

$('#tblNewAttendees tr').each(function() {
  alert('tr');
  //Cool jquery magic that lets me iterate over all the td only in this row
  $(magicSelector).each(function(){
    alert('hi');
  });

});

HTML：

<table>
     <thead>
          <th>someHeader</th>
     </thead>
     <tbody>
          <tr>
               <td>want to grab this first</td>
               <td> this second </td>
          </tr>
          <tr>
               <td>this third</td>
               <td>this fourth</td>
          </tr>
     </tbody>
</table>

- gh9

Answer 1

在您的TR循环内，您可以简单地执行以下操作：

$(this).find('td').each (function() {
  // do your cool stuff
});                          

- Gregg

---

您可以使用children()代替find()来确保只搜索tr下面的一个DOM层级。find()会搜索底下的每个层级，如果td包含了复杂内容（例如另一个带有单元格的表格，太可怕了！），那么使用children()更安全（也更快速）。 - carbontracking

Answer 2

您根本不需要使用jQuery选择器。您已经通过cells属性在每行中获得了对单元格的引用。

$('#tblNewAttendees tr').each(function() {

    $.each(this.cells, function(){
        alert('hi');
    });

});

利用已有的集合比通过DOM选择创建新的集合要更有效率。

在这里，我使用了jQuery.each()^(文档)方法，这只是一种通用的迭代和枚举方法。

- user113716

---

+1: jQuery很好用，但是当你使用它来重新发明DOM时，就有些不恰当了。那并不是它的设计初衷。 - Joel Mueller

@Joel：我完全同意。 - user113716

$('#' + otable.id + ' tr').each(function () { $.each(this.cells, function () {
alert($(this).html()); }); }); 请将上述代码翻译为中文。 - themhz

Answer 3

你的 $(magicSelector) 可以写成 $('td', this)。这将选择所有作为 this 的子元素的 td，在你的情况下是每个 tr。这与使用 $(this).find('td') 相同。

$('td', this).each(function() {
// Logic
});

- gen_Eric

---

如何调用迭代元素（td）？ - FrenkyB

Answer 4

在上面的答案中，'each'函数会返回table-cell的html对象。将其包装在$()中，然后就可以在其上执行jQuery操作。

$(this).find('td').each (function( column, td) {
  $(td).blah
});  

- Poul

Answer 5

完整示例以演示如何使用jQuery查询HTML表中的所有数据。

假设您的HTML代码中有一个类似以下的表格。

<table id="someTable">
  <thead>
    <tr>
      <td>title 0</td>
      <td>title 1</td>
      <td>title 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 0 td 0</td>
      <td>row 0 td 1</td>
      <td>row 0 td 2</td>
    </tr>
    <tr>
      <td>row 1 td 0</td>
      <td>row 1 td 1</td>
      <td>row 1 td 2</td>
    </tr>
    <tr>
      <td>row 2 td 0</td>
      <td>row 2 td 1</td>
      <td>row 2 td 2</td>
    </tr>
    <tr> ... </tr>
    <tr> ... </tr>
    ...
    <tr> ... </tr>
    <tr>
      <td>row n td 0</td>
      <td>row n td 1</td>
      <td>row n td 2</td>
    </tr>
  </tbody>
</table>

然后，“答案”即打印所有行和列的代码应该像这样。

$('#someTable tbody tr').each( (tr_idx,tr) => {
    $(tr).children('td').each( (td_idx, td) => {
        console.log( '[' +tr_idx+ ',' +td_idx+ '] => ' + $(td).text());
    });                 
});

运行代码后，结果将会显示。

[0,0] => row 0 td 0
[0,1] => row 0 td 1
[0,2] => row 0 td 2
[1,0] => row 1 td 0
[1,1] => row 1 td 1
[1,2] => row 1 td 2
[2,0] => row 2 td 0
[2,1] => row 2 td 1
[2,2] => row 2 td 2
...
[n,0] => row n td 0
[n,1] => row n td 1
[n,2] => row n td 2

摘要。
在代码中，
tr_idx是从0开始的行索引。
td_idx是从0开始的列索引。

通过比较答案的源代码和输出结果，
您可以从此双重循环代码中获取所有的循环索引和每个td单元格中的数据。

- Milo Chen

Answer 6

$('#tblNewAttendees tbody tr).each((index, tr)=> {
        //console.log(tr);
        $(tr).children('td').each ((index, td) => {
            console.log(td);

        }); 

    });

您也可以使用这个 tr 和 td 参数。

- ExploreNav