jQuery选择器用于获取同一列中的单元格

时间:2012-12-27 20:48:58

标签: javascript jquery

给定一个多行多列表,如何选择同一中的所有单元格与任意单元格(例如单击的单元格)。

类似的东西:

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

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

2 个答案:

答案 0 :(得分:22)

您的尝试是正确的,您只需使用.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");
});

答案 1 :(得分:4)

这可以使用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