【问题标题】：jQuery selector to grab cells in the same columnjQuery选择器抓取同一列中的单元格
【发布时间】：2012-12-28 05:25:19
【问题描述】：

给定一个多行、多列表的表格，我如何选择同一列中的所有单元格作为任意单元格（例如，单击的单元格）。

类似：

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

我需要在不单独命名列的情况下执行此操作。例如。它应该适用于简单的通用 table 标记，无需额外的类或 ID..

【问题讨论】：

标签： javascript jquery

【解决方案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");
});

【讨论】：

（我不是反对者，但我有一个问题：）您现在拥有的 .eq() 只会从 all 中获取 nth 元素 匹配的tds，因此只会得到第一行的那个。我认为它需要each() 才能使其工作？类似...find("tr").each(function(){this.find("td").eq(columnNo)});。有没有更简单的方法？
@brentonsrine 哎呀。你是对的，.eq 不起作用，但你不需要循环。请改用nth-child 选择器。

【解决方案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

【讨论】：

@mplungjan 好建议，已更新。想知道是否有一种不那么混乱的方式来获取 tds，可能是事先？让我试试并更新答案。
.eq() 不是这样工作的。 描述：将匹配的元素集减少到指定索引处的元素。它返回一个jQuery对象，从不一个数字。
看起来.eq() 返回一个对象而不是索引号。 nbrooks 关于使用index() 的建议对我来说似乎更有意义。
啊，是的。 Eq 返回一个包含匹配元素列表的 jQuery 对象。应该使用索引来查找偏移量。我已经更新了我的答案。
@mplungjan 刚刚发现eq 实际上不起作用，必须使用nth-child 选择器。 Eq 将获取整个 td 列表中指定索引处出现的元素。不管trs如何，它都会这样做。