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

Question

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

第二个有 6 行高，包含 7 个 td。

当用户单击第一个表中的 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');

});

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

如果你想知道我在说什么，那么基本上我正在尝试建立连接四。

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

Answer 2

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

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

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