Question

无法使用jquery更改数据表的背景颜色。我试图在下面显示示例，但是当您运行它时，它并不能真正代表问题。当用户单击某些内容时，我需要将整个表格的背景更改为黑色。我发现这条线会更改某些单元格，但不会更改其他单元格。同样，刷新表中的数据后，单元格也会变回原样。由于这两个原因，都不是好的解决方案。

jQuery('#tablepress-1_wrapper  td:gt(0)').css('background-color', '#000000');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tablepress-1_wrapper" class="dataTables_wrapper no-footer" style="background-color: rgb(0, 0, 0);">
  <div class="dataTables_length" id="tablepress-1_length"><label>Show <select name="tablepress-1_length" aria-controls="tablepress-1" class=""><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div>
  <div id="tablepress-1_filter"
    class="dataTables_filter"><label>Search:<input class="" placeholder="" aria-controls="tablepress-1" type="search"></label></div>
  <table id="tablepress-1" class="tablepress tablepress-id-1 dataTable no-footer" role="grid" aria-describedby="tablepress-1_info" style="width: 1203px; background-color: rgb(0, 0, 0);">
    <caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;"><a href="https://example.com/wp-admin/admin.php?page=tablepress&amp;action=edit&amp;table_id=1">Edit</a></caption>
    <tbody>

      <tr role="row" class="odd">
        <td class="sorting_1">Promise Strategy</td>
        <td>Bitmex</td>
        <td>0</td>
        <td>0.00000000</td>
        <td>1h:38m</td>
        <td><a href="#"><i class="fas fa-trash delIns" value="13"></i></a></td>
      </tr>
    </tbody>
    <thead>
      <tr role="row">
        <th class="sorting_asc" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 361px;" aria-label=": activate to sort column descending" aria-sort="ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 155px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 53px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 245px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 163px;" aria-label=": activate to sort column ascending"></th>
        <th class="sorting" tabindex="0" aria-controls="tablepress-1" rowspan="1" colspan="1" style="width: 58px;" aria-label=": activate to sort column ascending"></th>
      </tr>
    </thead>
  </table>
  <div class="dataTables_info" id="tablepress-1_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div>
  <div class="dataTables_paginate paging_simple_numbers" id="tablepress-1_paginate"><a class="paginate_button previous disabled" aria-controls="tablepress-1" data-dt-idx="0" tabindex="0" id="tablepress-1_previous">Previous</a><span><a class="paginate_button current" aria-controls="tablepress-1" data-dt-idx="1" tabindex="0">1</a></span>
    <a
      class="paginate_button next disabled" aria-controls="tablepress-1" data-dt-idx="2" tabindex="0" id="tablepress-1_next">Next</a>
  </div>
</div>

Answer 1

使用CSS管理样式。创建背景色的类（例如： .backBackground ），并使用jQuery将其附加到表中，如下所示：

$('#tablepress-1').addClass('blackBackground');

您可以像这样轻松地将其删除：

$('#tablepress-1').removeClass('blackBackground');

您的CSS新类如下所示：

.blackBackground{
    background-color: #000;
}

这是工作副本-> https://github.com/nwilming/pyedfread/tree/master/pyedfread

动态更改数据表的背景色

1 个答案: