Question

Each row of the table has an attribute called "id".

I want to have a red background for the row whose "id" is 8.

var selectedId = 8;

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {               
    if (this.data().id == selectedId) {
        $(table.row(rowIdx).node()).css('background-color', 'red'); // <-  does not work                  
        $(table.row(rowIdx).node()).addClass("redBackgroundClass"); // <-does not work
    }       
});

How can I dynamically add a red background to rows based on their id value?

Please note

In fact, i've reduced the above code to:

var node =$(table.row(0).node());
console.log(node); // <-- ok, console prints "<tr>"
node.css("background-color","red"); // <- does not work

Answer 1

Probably the easiest way to do this is to set up a css class that includes the background color being red, then, after the dataTable has been loaded, assign that class to the rows who have an id of 8. You can do this with the rowCallback option in the DataTables initialization:

$(document).ready(function() {
    $('#example').DataTable({
        //Other setup/config options go here
        rowCallback: function(row, data){
            if(data["id"] == 8){ //I'm assuming you're using object JSON/ajax, if not,
                                 //you'll have to find where in the data[] object the id is
                $(row).addClass("redBackgroundClass");
                //Or alternatively:
                //$(row).css("background-color","red"); if you don't want to make a css class
        }
    });
} );

With this code block, as long as you have a css class named "redBackgroundClass" with the appropriate background attribute, all rows with an id of 8 will have a red background.

Edit: As per @Carl's comment, you don't actually have to have a separate css class, you can just set the row's css background color if you want. I've included both in the code.

Edit 2: If you cannot access/modify the DataTables initialization for some reason, here is an alternative way to do it:

var table = $('#example').DataTable(); //You don't have this line, but just note the name
                                       //'table' is the name of the DataTable object

var row = table
    .row('8') //This assumes that the official DT row index is named "8", if instead you
    .node();  //want the actual 8th row, just remove the ' marks and use row(8)

$(row).css("background-color","red");

Edit 3: You've correctly pointed out that this code is equivalent to your example, but note that there is a difference in that your example has an if statement before it. I got that example on the DataTables documentation, so the syntax of that is correct. I think that your problem must be either that if statement never evaluates to true or you are mistaken about where in the data() id is located. Try stepping through and seeing if you can confirm that those values are what you expect.

Answer 2

I found the answer. i had to iterate over the td's inside the tr and set their styles

var node = $(table.row(8).node());
node.find('td').each (function(index, value) {
    $(value).css("background-color","#AA0000");
    //$(value).addClass("redBGClass");  // this also works
});

datatables set row color when certain condition is met

2 个答案: