Get column name from clicked row

Ludde

Hello,

I use the code below to toggle the color of the row on click. I would like to filter out two columns that I do not want to change the color when the row is clicked. What is the best way to do that? Can I get the column name from the click?

$('#idTable tbody').on('click', 'tr', function (e) {
                        
        $(this).toggleClass('selected');
}); 

Cheers L

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You can inspect the rows that are selected to see what styling is set. You might find something like this for each td in the selected row:

table.dataTable.display > tbody > tr.odd.selected > * {
    box-shadow: inset 0 0 0 9999px rgb(13 110 253 / 92%);
}

Keep looking and you will see that it overrides this:

table.dataTable.display > tbody > tr.odd > * {
    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 2%);
}

So you will want to override this for the columns you don't want to highlight. Also you will find that the text color is set to white so you will want to override that and set it to the normal text color that was overridden. See this default styled Datatables to see how the above can be overriden:
http://live.datatables.net/jiquxawa/1/edit

Can I get the column name from the click?

You will probably need to change the selector used to something like this to get the column clicked using the column-selector of td:

$('#idTable tbody').on('click', 'tr td', function (e) {
  var column = table.column( this );
  console.log(column.index())
});

Kevin

Ludde

Thanks again kthorngren! You pointed me again in the correct direction! Super thanks!