Menu
Here is a method for selecting a column in a table using the selector :nth-child(n) . You could then do whatever you want to it, like hiding or highlighting it. An example use could be showing that a particular column has been sorted, instead of the more traditional method of showing some indicator on the header.
The colvis button type provides a columns option to allow you to select what columns should be included in the column visibility control list. This option is a column-selector and thus a number of methods to select the columns included are available including jQuery selectors and data index selectors.
In Mozilla Firefox, users may highlight only certain rows, columns, or cells of an HTML table by holding down the Ctrl on the keyboard and click each cell individually.
Ok. I found a solution:
$('table tr td:nth-child('+ownerIndex+')')
In the example above ownerIndex needs to be incremented by 1 to match the indexing of nth-child, which starts at 1 rather than 0.
Here's my take: http://jsfiddle.net/2xU8t/
/* Set all the cells in columns with THEHEADING in the heading to red */
// Find the heading with the text THEHEADING
columnTh = $("table th:contains('THEHEADING')");
// Get the index & increment by 1 to match nth-child indexing
columnIndex = columnTh.index() + 1;
// Set all the elements with that index in a tr red
$('table tr td:nth-child(' + columnIndex + ')').css("color", "#F00");
// Set the heading red too!
columnTh.css("color", "#F00");
This seems to work using the back tick as opposed to a single quote:
$(`table tr td:nth-child(${ownerIndex})`)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With