How to change first column background color in Datatables
Question
Hello I have below 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>
The above code is synced with JQuery Data tables. When I am running it the sorted column is having different color. But I want it to change when I select a row. Could you please help in this?
6 answers
solution1
3 2020-08-27 08:31:32
Good contribution from wi7sonjoseph it was perfect
"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>');
}}
There is also a good contribution here. https://jsfiddle.net/jlujan/r041f7mw/
solution2
1 2016-06-28 06:01:31
First column with different color is due to the class display used by datatable. Remove class display from table will do the trick
Refer Datatable Styling to know more about its styling
solution3
0 2016-06-28 05:47:34
To change the color of the first colunm, try this:
$(document).ready(function(){
$("#example tr").children("td").first().css({"background-color":"#C94BCB"}); // Choose your color!
});
About hover ... It's unclear.
solution4
0 2016-06-28 05:52:17
Just use CSS:-
td:first-child {
/* your stuff here */
background-color:#ffffff;
}
If you need for nth-child you can specify like this
td:nth-child(n) {
/* your stuff here */
background-color:#ffffff;
}
Reference Link:- CSS First-child
solution5
0 2016-06-28 06:10:23
Use td and 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>
solution6
0 2017-12-13 07:11:28
Use rowCallBack (Use aData if you want to check some specific field to change color)
"rowCallback" : function(nRow, aData, iDisplayIndex) {
if (aData != null && aData != "") {
$('td', nRow).eq(0).css({color: "#f91212"});
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.