javascript - 使用 jQuery 如何逐个表选择 tr 中的每个 td

Question

在我的界面中，我有多个表。我想逐个表地转到“tr”中的每个“td”。如果我使用这种方式，代码无法识别表，

$(function() {
    $('tr').each(function() {
        // For each row
        $(this).find('td').each(function(i) {
           // code to be execute 
        });
        
    });
});

它的工作原理是这样的，执行所有表中的第一列，然后转到第二列。我想这样做，执行第一个表中的第一列，然后转到第一个表中的第二列，并将第二个表作为第一个表执行

上面的代码会发生这种情况

这就是我想做的

有人可以帮我做到这一点吗，谢谢...

Answer 1

您可以使用表和列的索引执行类似的操作

$(function() {
  $('table').each(function(ind) {
    $(this).find('tr').each(function() {
      $(this).find('td').each(function(i) {
        $(this).text(ind * 2 + i + 1);
      });
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

如果列数不同，您还可以执行以下操作

$(function() {
  var i = 1;
  $('table').each(function(ind) {
    $table = $(this);
    $(this).find('tr:first').each(function() {
      $(this).find('td').each(function(i1) {
        $table.find('tr td:nth-child(' + (i1 + 1) + ')').text(i++);
      });
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>


<table>
  <tr>
    <td></td>
    <td></td>

    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>