I am trying to set a css class to a row using the DataTables, query plugin for tables.

I managed to set the class on the tr tag when the initialization was plete with:

"fnInitComplete": function(oSettings) {
                                for (var i = 0, iLen = oSettings.aoData.length; i < iLen; i++) {
                                    oSettings.aoData[i].nTr.className = "myClass";
                                }
                            },

I want to set a callback for each new row, and set to tr class a and to td class b

I know how to add a class, and i need to set a class!

"fnRowCallback": function(nRow, aaData, iDisplayIndex) {
                                console.log(aaData);
                                $('tr', nRow).addClass('a');
                                $('td:eq(0)', nRow).addClass('b');
                                $('td:eq(1)', nRow).addClass('b');
                                $('td:eq(2)', nRow).addClass('b');
                                $('td:eq(3)', nRow).addClass('b');
                                return nRow;
                            },

this is what troubles me:

$('tr', nRow).addClass('a');

I don't know how to set a class to a tr tag.

I am trying to set a css class to a row using the DataTables, query plugin for tables.

I managed to set the class on the tr tag when the initialization was plete with:

"fnInitComplete": function(oSettings) {
                                for (var i = 0, iLen = oSettings.aoData.length; i < iLen; i++) {
                                    oSettings.aoData[i].nTr.className = "myClass";
                                }
                            },

I want to set a callback for each new row, and set to tr class a and to td class b

I know how to add a class, and i need to set a class!

"fnRowCallback": function(nRow, aaData, iDisplayIndex) {
                                console.log(aaData);
                                $('tr', nRow).addClass('a');
                                $('td:eq(0)', nRow).addClass('b');
                                $('td:eq(1)', nRow).addClass('b');
                                $('td:eq(2)', nRow).addClass('b');
                                $('td:eq(3)', nRow).addClass('b');
                                return nRow;
                            },

this is what troubles me:

$('tr', nRow).addClass('a');

I don't know how to set a class to a tr tag.

• javascript
• jquery
• datatables

2 Answers 2

According to the docs (fnRowCallback) the nRow represents a TR element

so this should do:

$(nRow).addClass('a');

If you want to add class to certain row N# you can use this(just build a proper selector):

$("tr:eq(" + rowNumber+ ")").addClass('a');

the string should look like this "tr:eq(1)"

If my understanding is correct then your issue might be in this line:

$('tr', nRow).addClass('a');

Because it equates to writing:

$(nRow).find('tr').addClass('a');

And you shouldn't be able to find a TR inside another TR (unless of course you are working with nested tables but we won't get into that)

If this is the case then your fix would be:

$(nRow).addClass('a');

Good Luck!