使用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

你可以使用表和列的索引

来做这样的事情

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

$(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++);
      });
    });
  });
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改选择器以选择每个td。 $("tr td").each(fn...

Answer 3

您需要使用嵌套的每个：

$(function() {
    $('table').each(function() {

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

    });
})