jQuery按条件选择表格中的最后一个单元格答案

【问题标题】：jQuery select last cell in a table by conditionjQuery按条件选择表格中的最后一个单元格
【发布时间】：2018-04-01 07:03:25
【问题描述】：

我有两张桌子。第一个是一行高，包含 7 个 tds。

第二个是 6 行高，包含 7 个 tds。

当用户单击第一个表中的 td 时，表 2 中相应列中具有类“x”的最后一个单元格将删除类“x”并添加类“y”。

所以下次单击同一列时，其上方的单元格将删除类“x”并添加类“y”，依此类推...

我已经设法使用允许您选择“nth-col”的插件来选择相应的列：

$('#table1 td').click(function(){

    var col = ($(this).index()+1);

    $('#table2 td:nth-col('+col+')').removeClass('x').addClass('y');

});

但就是不知道如何选择行！

如果您想知道我在做什么，那么基本上我正在尝试连接四个。

【问题讨论】：

我认为应该是nth-child() 而不是nth-col()

标签： jquery html-table row

【解决方案1】：

你可以在没有任何插件的情况下做到这一点。以相反的顺序遍历行，检查第 N 个 td 元素。在找到第一个之后退出循环。这是一个简单的解决方案，但可能没有适当优化以处理数千行/列。 :)

现场演示：http://jsfiddle.net/yydZ3/1/

//Set all classes to x
$('td').addClass('x');

$('td').click(function(){
    var $this = $(this);
    var col = $this.index();

    //Iterate through rows in reverse order
    $($('tr').get().reverse()).each(function(){
        var $cell = $(this).find('td:eq('+col+')');
        if($cell.hasClass('x')){
            //Found one, this must be the last in this column
            $cell.removeClass('x').addClass('y');

            //Exit out of each loop
            return false;
        }
    });
});

【讨论】：

【解决方案2】：

选择适当的tr（行），然后选择td元素（单元格）：

$('#table2 tr:eq('+row+') td:eq('+col+')').removeClass('x').addClass('y');

查看一个非常基本的测试：http://jsfiddle.net/MgTGf/1/

【讨论】：