遍历tr td元素

Question

我有下表

   <table id="myTable">
    <tbody>     
                    <tr role="row" class="odd">
                        <td>xx</td>                    
                        <td>100</td>
                        <td>sss</td>
                        <td>00w</td>
                        <td>21</td>
                        <td>2</td>
                        <td>090</td>
                        <td>12</td>
                        <td>00:15</td>
                        <td>JHS</td>
                        <td>--</td>
           </tr>
           <tr> ... </tr>

    </tbody>
    </table>

在tr上单击我要遍历每个td并将其结果打印到控制台

 $('#myTablet body').on('click', function (e) {
   e.preventDefault();
   ...
});

Answer 1

一种方法是iterate所有tr元件和显示每一个td从细胞tr 。这可以通过使用可实现each()方法。

find()方法获取当前匹配元素集中每个元素的后代

 $('#myTable tbody tr').on('click', function () { $(this).find('td').each(function(index,item){ console.log($(item).html()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <tbody> <tr role="row" class="odd"> <td>xx</td> <td>100</td> <td>sss</td> <td>00w</td> <td>21</td> <td>2</td> <td>090</td> <td>12</td> <td>00:15</td> <td>JHS</td> <td>--</td> </tr> <tr> <td>xx</td> <td>100</td> <td>sss</td> <td>00w</td> <td>21</td> <td>2</td> <td>090</td> <td>12</td> <td>00:15</td> <td>JHS</td> <td>--</td> </tr> </tbody> </table> 

Answer 2

这可以帮助：

$(document).ready(function(){
    $('#myTablet tr.row').on('click', function (e) {
       $(this).find('td').each(function(index, element) {
            console.log($(element).text();
       }
       )
    });
})

Answer 3

您可以使用以下内容。 首先单击tr并获取其所有tds，然后进行迭代。

$('#myTable tr').on('click', function (e) {
   var tds = $(this).find("td");
   tds.each(function(){
       console.log($(this).text());
   });
});

Answer 4

你可以这样尝试

$(document).on("click",'tr', function(){
   $(this).find("td").each(function(x,y){
      console.log($(this).html());
   });
});

试试看。 它会工作。

Answer 5

为此，您可以使用每个函数：

$('#myTablet tr').on('click', function (e) {
    e.preventDefault();

    $(e.currentTarget).find('td').each(function(i,e) {
        console.info($(e).text();
    });
});

Answer 6

试试这个例子

 $(function() { $(document).on('click', '#myTable', function (e) { $("#tr_row").clone().appendTo("#dynamic"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <table id="myTable"> <tbody> <tr role="row" class="odd" id="tr_row"> <td>xx</td> <td>100</td> <td>sss</td> <td>00w</td> <td>21</td> <td>2</td> <td>090</td> <td>12</td> <td>00:15</td> <td>JHS</td> <td>--</td> </tr> <span id="dynamic"></span> </tbody> </table>