Question

我正在使用DataTables库来管理一些表数据。当前数据表项目按行单击任意位置进行选择。但我的目标是通过名为“checkItem”的输入检查类来选择行。是否可以使用DataTables库？注意：我已经尝试用className替换className：'select-checkbox'：'checkItem'但没有运气。请帮忙

使用Javascript：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">


<script type="text/javascript">

    $(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'multi',
            //selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );

</script>

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1" /></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1" /></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="2" /></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="3" /></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="4" /></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="5" /></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>$372,000</td>
            </tr>
        </tbody>
    </table>

Answer 1

您可以获取所单击复选框的父级，然后将该类添加到该元素。这是jsfiddle.

<table width="100%" id="example">
  <thead style="background:#C0C0C0;">
    <tr>
      <th colspan="5">first headline</th>
    </tr>
    <tr>
      <th> check box </th>
      <th style="padding-left: 15px;"> Id </th>
      <th> Product Name </th>
      <th> Total Events </th>
      <th> Total Revenue </th>
      <th> Rental Time </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="selectrow"></td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>$372,000</td>
      <td>New York</td>
      <td>4804</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="selectrow"></td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>$137,500</td>
      <td>San Francisco</td>
      <td>9608</td>
    </tr>
  </tbody>

</table>
<style>
  .select-checkbox {
    background: blue;
  }

</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

$(document).ready(function() {
  var table = $('#example').DataTable();
  $('.selectrow').on('click', function() {
    if ($(this).parent().parent().hasClass('select-checkbox')) {
      $(this).parent().parent().removeClass('select-checkbox');
    } else {
      table.$('tr.select-checkbox').removeClass('select-checkbox');
      $(this).parent().parent().addClass('select-checkbox');
    }
  });
});

自定义输入复选框类名称上的DataTable项目选择

1 个答案: