针对 Jquery 数据 Table CSS 样式的目标

Question

使用动态 Jquery 数据 Table 和 10 table headers。无法在代码中向标题为 'Unused'.

的特定对象添加 class 或代码中的 Id

在.css我试过了

[title~= Unused] {
    background-color: goldenrod !important;
    font-weight: 900 !important;
}

在jQuery我试过：

$('th[data-title="Unused"]').css("color", "goldenrod");
$(row.Unused).css("color", "goldenrod");
$("row.Unused").css("color", "goldenrod")
$("row.Unused").addClass("highlight")

有什么想法、建议吗？

Answer 1

您可以使用 DataTables initComplete 选项。

这确保 table 已初始化并且标题可供操作。

以下演示搜索标题“Office”的标题，然后更改该标题的字体颜色：

$(document).ready(function() {

  $('#example').DataTable( {

    "initComplete": function ( settings ) {
      $('#example thead tr th').each(function() {
        if ($(this).html() === 'Office') {
            $(this).css("color", "goldenrod");
        }
      }); 
    }

  } );

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">


</style>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="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>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>0,750</td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>

针对 Jquery 数据 Table CSS 样式的目标

Target one specific Jquery Data Table theader for CSS styles

jquery

css

datatable

css-selectors