时间戳

首页 > 解决方案 > 动态更改数据表背景颜色

jquery - 动态更改数据表背景颜色

问题描述

无法使用 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>

标签： jquerycssdatatables

解决方案

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

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

您可以像这样轻松删除它：

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

你的 CSS 新类看起来像这样：

.blackBackground{
    background-color: #000;
}

这是一个工作副本-> https://jsfiddle.net/rk2gayse/6/

推荐阅读