Question

I am using jQuery dataTables to add new rows dynamically. I am able to modify class attributes of the full row, but not columns therein.

In the below code I successfully set the css value to red and see the entire row with red font:

 var dataTableRow = ['c1', 'c2', 'c3', 'c4', 'c5', 'c6'];
 var newrow = $('#invoicetable').dataTable().fnAddData(dataTableRow);

 // set class attribute for the newly added row 
 var nTr = $('#invoicetable').dataTable().fnSettings().aoData[newrow[0]].nTr;

 // and parse the row:
 var nTds = $('td', nTr);


 nTds.attr('class', 'TMP');
 $('.TMP').css('color', 'red');

I recognize that nTds[] acts as an array containing columns of the row, but as simple a change as nTds[0].attr(‘class’, ‘TMP’); does not set just the 0th column to red font as I might expect.

Clearly I am missing something simple. Guidance appreciated.

Answer 1

nTds[0].attr() won’t work as attr is a jQuery method and nTds[0] returns the actual HTML element without the jQuery wrapper.

If you want to target a single element using jQuery syntax you can use eq(), similar to this:

nTds.eq(0).attr('class', 'TMP') //or 
nTds.eq(0).addClass('TMP')