How to select a table column with jQuery

Question

I want to select a table column and all I know is the header text of the column. (th.innerText)

I tried the following code but it doesn\'t work:

owne         


        

Answer 1

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"); 

Answer 2

Ok. I found a solution:

$('table tr td:nth-child('+ownerIndex+')')

Answer 3

This seems to work using the back tick as opposed to a single quote:

$(`table tr td:nth-child(${ownerIndex})`)