如何使用此行中的按钮在数据表中添加类行?

时间:2017-08-08 12:20:04

标签: javascript jquery datatable

我正在使用数据表jquery和我在行中定义的按钮。我想点击任意一行的按钮。单击按钮的行将添加类selected。如果我选择另一行,则后面的行将删除类selected,新行单击将添加类selected

var table = $('#id_table').DataTable({ 
	////......
});

$('#id_table tbody').on('click', 'button', function (e) { 
	table.row($(this)).hasClass('selected');
});

我收到错误Uncaught TypeError: table.row(...).hasClass is not a function

1 个答案:

答案 0 :(得分:4)

我认为你可以使用以下代替table.row($(this)).hasClass('selected');这里this是按钮元素。

$('#id_table tbody').on('click', 'button', function (e) {
  table.$('tr.selected').removeClass('selected');
  $(this).closest('tr').addClass('selected');
});



$(document).ready(function() {
  var table = $('#id_table').DataTable();
  $('#id_table tbody').on('click', 'tr', function() {
    table.$('tr.selected').removeClass('selected');
    $(this).addClass('selected');
  });
});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="id_table" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;