Селектор jQuery для захвата ячеек в том же столбце

Учитывая многострочную таблицу с несколькими столбцами, как я могу выбрать все ячейки в том же столбце, что и любая произвольная ячейка (например, ячейка, на которую нажата).

Что-то вроде:

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

Мне нужно сделать это, не называя столбцы индивидуально. Например. он должен работать с простой общей разметкой table без дополнительных классов или идентификаторов.

Ответ 1

Ваша попытка правильная, все, что вам нужно сделать, это использовать .index, чтобы найти номер столбца - индекс <td> в строке. Вам также необходимо использовать nth-child-selector для соответствия индексам столбцов других элементов <td>.

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

Ответ 2

Это можно сделать с помощью метода jQuery eq.

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

Не уверен, что это самый эффективный способ сделать это, но это решение, с которым я столкнулся, когда сталкивался с той же проблемой некоторое время назад.

Ссылка

jQuery.eq