Select a row from datatable and change its css style in jquery

waweru99 karanja

I am working on a project whereby upon adding a new record to the datatable i want to have the new row/s to change the background to another color instead of the current one.i have successfully been able to get the new rows from the table now am looking for a way to change the background color.here is my code

   currentProductsTable.draw(); //this reload s the table after updating it

    var newproductsIdsArray=['20','21','22','23','24','25']

    $.each(newproductsIdsArray, function(i, item) {
        var $row = currentProductsTable.rows().eq(0).filter(function(index)
        {
           return currentProductsTable.cell(index, 0).data() === item;
       });

       console.log($row);

       $row.css('background-color','orange');

    });

i have tried that but the row does not change the background color.When i console.log $row i get this

_Api {0: 31, context: Array(1), length: 1, selector: {…}, tables: ƒ, table: ƒ, …}

where am i missing the point?How can i be able to highlight the new rows that have been added after getting them.

allan

That's what Editor does when adding a new row or editing an existing one. I do that by adding a class to the cell, which has a CSS animation for it, and then removing it after a short time.

Allan

waweru99 karanja

i had made this mistake in my code, i was declaring the var row the wrong way var $row instead of var row.

then i changed the code to this

          currentProductsTable.draw();

            $.each(newproductsIdsArray, function(i, item) {
                currentProductsTable.rows().eq(0).each(function(index) {
                    var rowData = currentProductsTable.row(index).data();

                    if (rowData.ticket === item) {
                        var row = $(currentProductsTable.row(index).node());

                        row.find('td').css({
                            'background-color' : 'grey',
                            'color' : 'white'
                        });
                    }
                });
            });

and it worked like a charm