如果复选框被选中，如何逐行获取td值

Question

如果复选框被选中，我试图逐行获取td值。以下是我的HTML表格格式。

<table class="example"> 
    <tr role="row" class="odd "> 
     <td class=""><input type="checkbox" value="12"></td> 
     <td class="sorting_1">Airi Satou</td> 
     <td>Accountant</td> 
     <td>Tokyo</td> 
     <td>33</td> 
     <td>$162,700</td> 
    </tr> 
    <tr role="row" class="even"> 
     <td class=""><input type="checkbox" value="12"></td> 
     <td class="sorting_1">Airi Satou1</td> 
     <td>Accountan1t</td> 
     <td>Tokyo1</td> 
     <td>331</td> 
     <td>$162,7001</td> 
    </tr> 
</table> 
<input type="submit" class="tble_submit"> 

基于选择复选框，我需要td值。如果我检查了两个，那么我需要两个tr td。我试着用下面的jQuery代码，它总是返回第一个tr td值，即使我选中了两个复选框。

$(".tble_submit").click(function(){ 
    $('.example tr input[type="checkbox"]:checked').each(function(){ 
     var chk_len = $('.example input[type="checkbox"]:checked').length;    
     for(i=0;i<=chk_len;i++){           
      if ($('.example tr:eq('+i+') td input[type="checkbox"]:checked')){ 
       var $row = $(this).parents('tr');      
       var table_len = $('.example tr:eq('+i+') td').length;       
       var ab = $('.example tr td:eq('+i+') input').val(); 
       alert(ab) 
       for(i=1;i<table_len;i++){ 
        var abc = $('.example tr td:eq('+i+')').html(); 
        alert(abc) 
       } 
      }    
     }    
    });    
}); 

请帮我解决这个问题。提前致谢。

Answer 1

它应该比

$(".tble_submit").click(function(){ 
    $('.example tr input[type="checkbox"]:checked').each(function(){ 
     var $row = $(this).closest('tr'); 
     //used :not(:first-child) to skip first element (the checkbox td) 
     $('td:not(:first-child)', $row).each(function(i){ 
      var abc = $(this).text(); 
      alert(abc); 
     }) 
    });    
}); 

Answer 2

试试这个：

$('.tble_submit').click(function (e) { 
 
    e.preventDefault(); 
 
    var rows = []; 
 

 
    // Enumerate over each checked checkbox 
 
    $('input:checked').each(function() { 
 
    var row = []; 
 
    
 
    // Enumerate over all td elements in the parent tr, 
 
    // skipping the first one (which contains just the 
 
    // checkbox). 
 
    $(this).closest('tr').find('td:not(:first-child)').each(function() { 
 
     // Gather the text into row 
 
     row.push($(this).text()); 
 
    }); 
 
    
 
    // Add this row to our list of rows 
 
    rows.push(row); 
 
    }); 
 

 
    // JSONify for easy display 
 
    alert(JSON.stringify(rows)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="example"> 
 
    <tr role="row" class="odd "> 
 
     <td class=""><input type="checkbox" value="12"></td> 
 
     <td class="sorting_1">Airi Satou</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>33</td> 
 
     <td>$162,700</td> 
 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class=""><input type="checkbox" value="12"></td> 
 
     <td class="sorting_1">Airi Satou1</td> 
 
     <td>Accountan1t</td> 
 
     <td>Tokyo1</td> 
 
     <td>331</td> 
 
     <td>$162,7001</td> 
 
    </tr> 
 
</table> 
 
<input type="submit" class="tble_submit">

Answer 3

$(".tble_submit").click(function(){ 

$.each($('.example').find('tr'),function(i,data){ 
if($($(data).find('input[type="checkbox"]')).is(':checked'))){ 
//You can get all the values respectively of tr 
console.log(data) 
}; 

}) 

    }); 

请尝试这个方法