Question

我试图在Jquery数据表中添加“全选”复选框（多选）。我在标题行以及所有其他行上添加了复选框。单击按钮时，我需要获取第一列和第二列的数据。但是，在选中“全选”复选框时，前两个值显示为“未定义”。我相信这是由于标题部分。这是我的HTML部分-

    <table id="example" class="table table-bordered table-hover table-striped" style="width:100%">
    <thead>
        <tr>
            <th><input name="select_all" value="1" id="example-select-all" type="checkbox" /></th>
            <th>Schema</th>
            <th>Table Name</th>
            <th>BI Service</th>
            <th>Business Owner</th>
            <th>Solution Owner</th>
            <th>Last Update Time</th>
        </tr>
    </thead>
    </table>
    <br />
    <input id="btnGet" type="button" value="Get Selected" />

和Jquery如下-

$(document).ready(function (){   
   var table = $('#example').DataTable({
      'ajax': 'logapi3.php?query=query_01',  
      'columnDefs': [{
         'targets': 0,
         'searchable':false,
         'checkboxes': {
            'selectRow': true
         },
         'orderable':false,
         'className': 'dt-body-center',
         'render': function (data, type, full, meta){
             return '<input type="checkbox" name="id[]" value="' 
                + $('<div/>').text(data).html() + '">';
         }
      }],
      'order': [1, 'asc']
   });
   $('#example-select-all').on('click', function(){
      var rows = table.rows({ 'search': 'applied' }).nodes();
      $('input[type="checkbox"]', rows).prop('checked', this.checked);
   });
   $('#example tbody').on('change', 'input[type="checkbox"]', function(){
      if(!this.checked){
         var el = $('#example-select-all').get(0);
         if(el && el.checked && ('indeterminate' in el)){
            el.indeterminate = true;
         }
      }
   });
       $(function () {
    var data = [];
        $("#btnGet").click(function () {

            $("#example input[type=checkbox]:checked").each(function (i) {
            if(i==0){
        $(this).remove();
    }
                var row1 = $(this).closest("td").next("td")[0];
                var row2 = $(this).closest("td").next("td").next("td")[0];

            var row = row1.concat(".",row2);
                data.push(row);
                console.log(row1);
                console.log(row2);
                window.location = "email-php.php?query=" + data ;
            });

             return false;
        });
    });
});

我试图删除第一个选定的行，如下所示-

$("#example input[type=checkbox]:checked").each(function (i) {
            if(i==0){
        $(this).remove();
    }

但这不起作用。在这方面需要一些帮助。

控制台日志输出如下-

undefined
undefined
<td class="sorting_1">DAREO</td>
<td>IDW_TIME_YTYW4_LOOKUP_T</td>
<td class="sorting_1">DAREO</td>
<td>ITEM_SC_BASELINE_T</td>

Answer 1

我无法对此进行测试，但是您如何更改此行：

$("#example input[type=checkbox]:checked").each(function (i)

对此：

$("#example tbody input[type=checkbox]:checked").each(function (i)

编辑：

回顾一下，通过将选择范围限制为tbody，我们避免从表中获取不需要的值。

jQuery DataTable选择所有复选框问题

1 个答案: