Question

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

详细说明，我想访问第一个表行，然后是第一列，然后是第二列，等等。然后移到第二行并重复该过程。

类似的东西：

伪码：

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>

Answer 1

您可以在TR循环中执行以下操作：

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

Answer 2

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

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

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

});

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

这里我使用了jQuery.each()^(docs)方法，它只是迭代和枚举的通用方法。

Answer 3

您的$(magicSelector)可能是$('td', this)。这将抓取td的所有this个孩子，在您的情况下每个tr。这与执行$(this).find('td')相同。

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

Answer 4

扩展'each'函数上方的答案将返回table-cell html对象。在$（）中包装然后允许你对它执行jquery操作。

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

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开始的列索引。

通过此双循环代码，
比较Answer的源代码和输出结果后，您可以获得每个td单元中的所有循环索引和数据。

Answer 6

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

        }); 

    });

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

jquery在tr中选择每个td

6 个答案: