如何更改DataTables行顏色

Question

我有一個由DataTables繪制的表格。 對於每一行，表的最后一列是一個表示其他jquery元素的按鈕（在我的情況下為bxslider，但在這里無關緊要）。 我希望能夠在單擊按鈕buttom時更改行的顏色 。 我找到了一些解決方案，但是這些解決方案僅在繪制DataTable之前更改顏色，而在繪制DataTables時不運行。

按鈕的html類為“ onclick”。

我繪制一個數據表，如下所示：

$(div).DataTable({"data" : dataSet, "columns": columns})

我能做到嗎？

謝謝，問候。 麥克風

Answer 1

這樣的東西行嗎？

 //initialise datatables on DOM load $(document).ready(function() { $('#example').DataTable(); }); //on clicking the row $("tbody tr").on("click", function() { //loop through all td elements in the row $(this).find("td").each(function(i) { //toggle between adding/removing the 'active' class $(this).toggleClass('active'); }); }); 

 /* Set !important rule to override default colors */ .active { background: gold !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <table id="example" 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> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <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> </tbody> </table> 

Answer 2

    $('#dataTable').on('click', 'tr', function () {
        $(this).css("background-color", "#eeeeee");
    });