如何使用该行中的按钮在数据表中添加类行？答案

【问题标题】：How to add class row in datatable with button in this row?如何使用该行中的按钮在数据表中添加类行？
【发布时间】：2017-08-08 12:20:04
【问题描述】：

我正在使用数据表 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 的错误

【问题讨论】：

我相信table.row() 不会返回jQuery 对象。这就是为什么你的hasClass 功能不起作用的原因。
您是否考虑过使用此示例here 而不是使用按钮添加选定的类？

标签： javascript jquery datatable

【解决方案1】：

我认为您可以使用以下内容而不是使用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>

【讨论】：