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

时间:2016-07-20 09:29:41

标签: javascript jquery html checkbox

如果选中该复选框,我试图逐行获取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)
                }
            }             
        }              
    });              
});

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

3 个答案:

答案 0 :(得分:2)

它应该比那个简单得多

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

答案 1 :(得分:0)

尝试一下:

&#13;
&#13;
$('.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));
});
&#13;
<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">
&#13;
&#13;
&#13;

答案 2 :(得分:0)

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

})

    });

请尝试这种方式