1

我正在尝试为特定的 TH 设置背景颜色，但在 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>

谢谢你的帮助！！

4

3 回答 3

0

if it is just background color why not use 

$("#myTable")
  .find("thead th:nth-child(2)").css('background-color', 'green');
于 2012-08-01T14:37:21.723 回答
0

如果您已经知道列的索引（从我所见，编号为 2），您可以bgGreen通过选择 th 来使用它来应用类:nth-child()。（还有其他 方法可以获取列表中的第 n 个元素，这是一个示例。）

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

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

于 2012-07-29T18:09:48.647 回答
0

<th>您可以使用下面的 javascript将 .bgGreen 添加到第二个。.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;
}
于 2013-12-18T19:42:59.587 回答