Question

你好我在jsp以下，

<div id="dynamic">
        <table cellpadding="0" cellspacing="0" border="0" class="display"
            id="example">
            <thead>
                <tr>
                    <th width="10%">First Name</th>
                    <th width="10%">Last Name</th>
                    <th width="10%">Address 1</th>
                    <th width="10%">Address 2</th>
                </tr>
            </thead>
        </table>
    </div>

上面的代码与JQuery Data表同步。当我运行它时，已排序的列具有不同的颜色。但是当我选择一行时，我希望它能够改变。你能帮忙吗？

Answer 1

wi7sonjoseph的出色贡献非常完美

     "rowCallback": function( row, data ) {
        $('td', row).eq(2).addClass('warningcolumn');
        $('td', row).eq(3).addClass('warningcolumn');
        $('td', row).eq(15).addClass('warningcolumnok');
        $('td', row).eq(16).addClass('warningcolumnok');
if ( data.OPERATIVIDAD == 1) {
  $('td:eq(6)', row).html('<span class="label label-success">OPERATIVO</span>');
}
else {
  $('td:eq(6)', row).html('<span class="label label-danger">INOPERATIVO</span>');
}}

这里也有很好的贡献。 https://jsfiddle.net/jlujan/r041f7mw/

Answer 2

只需使用CSS： -

td:first-child {  
  /* your stuff here */
  background-color:#ffffff;    
}

如果您需要nth-child，可以像这样指定

td:nth-child(n) {  
  /* your stuff here */
  background-color:#ffffff;
}

参考链接： - CSS First-child

Answer 3

具有不同颜色的第一列是由数据表使用的类display引起的。从表中删除类display将起到作用

请参阅Datatable Styling以了解有关其样式的更多信息

Answer 4

要更改第一个colunm的颜色，请尝试以下操作：

$(document).ready(function(){
    $("#example tr").children("td").first().css({"background-color":"#C94BCB"}); // Choose your color!
});

关于hover ......现在还不清楚。

Answer 5

使用td和th-first-child style

th:first-child,td:first-child {  
  background-color:red;    
}

<!DOCTYPE html>
<html>
<body>
<style>
th:first-child,td:first-child {  
  background-color:red;    
}
</style>
<div id="dynamic">
        <table cellpadding="0" cellspacing="0" border="0" class="display"
            id="example">
            <thead>
                <tr>
                    <th width="10%">First Name</th>
                    <th width="10%">Last Name</th>
                    <th width="10%">Address 1</th>
                    <th width="10%">Address 2</th>
                </tr>
                <tr>
                    <td width="10%">First Name</td>
                    <td width="10%">Last Name</td>
                    <td width="10%">Address 1</td>
                    <td width="10%">Address 2</td>
                </tr>
                <tr>
                    <td width="10%">First Name</td>
                    <td width="10%">Last Name</td>
                    <td width="10%">Address 1</td>
                    <td width="10%">Address 2</td>
                </tr>
                <tr>
                    <td width="10%">First Name</td>
                    <td width="10%">Last Name</td>
                    <td width="10%">Address 1</td>
                    <td width="10%">Address 2</td>
                </tr>
            </thead>
        </table>
    </div>

</body>
</html>

Answer 6

使用rowCallBack（如果要检查某些特定字段以更改颜色，请使用aData）

"rowCallback" : function(nRow, aData, iDisplayIndex) {
            if (aData != null && aData != "") {
                  $('td', nRow).eq(0).css({color: "#f91212"});
            }
          },

如何更改数据表中的第一列背景颜色

6 个答案: