如何在數據表中使用該行的按鈕添加類行？

Question

我正在使用數據表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錯誤Uncaught TypeError: table.row(...).hasClass is not a function

Answer 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>