Question

我正在尝试为特定的TH设置背景颜色，但在DataTables的设置中没有找到一种简单的方法。我只使用表格的开始和结束标记。剩下的是DataTables。

<table id="myTable"></table>

<script type="text/javascript">
$(document).ready(function(){

    oTable = $("#myTable").dataTable({

        "aaData"      : myTableJsonData, //Working perfect
        "bProcessing" : true,
        "bJQueryUI"   : true,
        "sDom"        : "<'H'f>rt<'F'i>",       

        "aoColumnDefs" : [
            { "aTargets":[0], "mDataProp":"id",   "sTitle":"ID" },
            { "aTargets":[1], "mDataProp":"name", "sTitle":"NAME", "sClass":"name" },
            { "aTargets":[2], "mDataProp":"city", "sTitle":"CITY" }
        ]       
    });
});
</script>

属性“sClass”不适合我的情况，因为我不想改变所有的TD ..只有TH。我尝试过一些简单的事情：

// Not work because looks like it is overwritten by jquery UI theme
$("#myTable").closest("thead").find(".name").addClass("bgGreen");

如果我设置这样的东西，工作正常......但是想避免这种情况。

<table id="myTable">
    <thead>
        <tr>
           <th></th>
           <th class="bgGreen"></th>
           <th></th>
        </tr>
    </thead>
</table>

感谢您的帮助!!

Answer 1

如果您已经知道列的索引（从我可以看到的数字2），您可以通过选择带有:nth-child()的th来使用它来应用bgGreen类。（有other ways来获取列表中的第n个元素，这是一个例子。）

// Child column number known in advance (1-based)
$("#myTable")
  .find("thead th:nth-child(2)")
  .addClass("bgGreen");

如果您事先不知道列号，可以通过查找<td class="name">并找出它所在的列来获取数字。可能的解决方案可能涉及<tbody>中第一行的简单循环，并检查name类。那么这个数字可以用在上面的查询中，或类似的东西。

Answer 2

如果只是背景颜色，为什么不使用

$("#myTable")
  .find("thead th:nth-child(2)").css('background-color', 'green');

Answer 3

您可以使用下面的javascript将.bgGreen添加到第二个<th>。 .bgGreen的CSS定义需要!impotant以防止默认主题覆盖.bgGreen。您也可以使用直接CSS3来完成相同的结果。

$('#myTable > thead > tr > th:nth-child(2)').addClass("bgGreen");

.bgGreen {
    background : green !important;
}
#myTable > thead > tr > th:nth-child(2){
    background : green !important;
}

在jquery Datatables中为特定列设置背景

3 个答案: