jQuery selector to grab cells in the same column

Question

Given a multirow, multicolumn table, how can I select all cells in the same column as any arbitrary cell (e.g. a cell that is clicked on).

Something like:

$("td").click(function(){
    var columnNo = $(this).columnNo?
    $(this).closest("table").find("tr td:eq("+columnNo+")").css("color", "red");
});

I need to do this without naming the columns individually. E.g. it should work on simple generic table markup without extra classes or IDs..

Answer 1

Your attempt is right, all you need to do is use .index to find the column number—the index of the <td> within the row. You also need to use the nth-child-selector to match the column indices of the other <td> elements.

$("td").click(function(){
    var columnNo = $(this).index();
    $(this).closest("table")
        .find("tr td:nth-child(" + (columnNo+1) + ")")
        .css("color", "red");
});