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

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

waweru99 karanjawaweru99 karanja Posts: 17Questions: 5Answers: 1

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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 karanjawaweru99 karanja Posts: 17Questions: 5Answers: 1
    Answer ✓

    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

Sign In or Register to comment.