迭代tr td元素

时间:2017-02-02 12:12:03

标签: javascript jquery

我有下表

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

on tr click我想通过每个td迭代并将结果打印到控制台

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

6 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

这可能有所帮助:

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

你可以这样试试,

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

试一试。它会起作用。

答案 4 :(得分:0)

为此,您可以使用docs功能:

private func setupFetchController() {
    let fetchRequest : NSFetchRequest<NSFetchRequestResult> = Person.fetchRequest()

    // Sort Persons
    let sortDescriptor = NSSortDescriptor(key: "firstName", ascending: true)
    let sortDescriptor2 = NSSortDescriptor(key: "lastName", ascending: true)
    fetchRequest.sortDescriptors = [sortDescriptor, sortDescriptor2]

    // Filter Persons (only iType = 1)
    let predicate = NSPredicate(format: "iType == %i", 1)
    fetchRequest.predicate = predicate

    // Create the FetchController
    let fetchController = NSFetchedResultsController(fetchRequest: fetchRequest, managedObjectContext: context, sectionNameKeyPath: "sectionName", cacheName: nil)
    self.fetchController = fetchController
}

答案 5 :(得分:0)

试试这个例子

&#13;
&#13;
$(function() {
   $(document).on('click', '#myTable', function (e) {
     $("#tr_row").clone().appendTo("#dynamic");
   });
});
&#13;
<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>
&#13;
&#13;
&#13;