Jquery Selector To Grab Cells In The Same Column

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(){

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

Solution 2:

This can be done using the jQuery eq method.

var $tds = $("td"); // get all tds beforehand, so jquery doesn't // need to hit the DOM every click

$("td").on("click", function () {
    var position = $(this).index(),
        $tdsInColumn = $tds.filter(":nth-child(" + index + ")");

    // manipulate $tdsInColumn in any way
    $tdsInColumn.addClass("selected");
});

Not sure if this is the most efficient way of doing so, but it is the solution I came up with when faced with the same problem a while back.

Reference

jQuery.eq