Question

我有一个JavaScript的工作示例，在表格单元格上单击选择当前单元格以及所有右侧和底部。这是jsFiddle与工作代码：

function selectCell(item){
    var cell = item.parentNode,
        table = cell.parentNode,
        rowPos = cell.rowIndex,
        colPos = item.cellIndex;

    $(table).find('td').removeClass('selected');

    for(r = rowPos; r < table.rows.length; r++) {
        for(c = colPos; c < table.rows[r].cells.length; c++) {
            jQuery(table.rows[r].cells[c]).addClass("selected");
        }
    }
}

检查http://jsfiddle.net/w3yPk/

上的工作副本

问题是，当我在表格中有rowspan时，我的当前脚本不起作用，请参阅此jsFiddle有问题：http://jsfiddle.net/qTWaH/1/

我真的被困了，也许你知道如何解决这个问题？

Answer 1

它似乎无法识别细胞，因为它们基本上是它们行的第一，第二和第三。

在Google上搜索后，我结束了this SO answer，但that didn't provide a solution for your problem either。然后，经过一些更具体的搜索，我最终得到this SO answer，基本上说“你需要一个jQuery插件”。如果你愿意，你可以使用这些答案，但我会提供一个不需要任何插件的替代方案。

要解决这个问题，我只需在每个colspan'd元素下面添加一个隐藏的（display:block）单元格。这样，JavaScript仍然将其视为占用的空间。为了做到这一点，我使用以下jQuery函数：

$('#demo-table td').each(function() {
    if (!$(this).is('[rowspan]')) return;
    var i = +$(this).attr('rowspan');
    var $nextRow = $(this).parent('tr');
    while (($nextRow = $nextRow.next()) && --i > 0) {
        $nextRow.prepend('<td style="display:none;"></td>');
    }
});

View demo

我在此假设您定义的colspan的单元格始终位于表格行的开头。如果它们不是，我将不得不为它添加一些代码，但也可以这样做。如果你需要它来为colspan的其他职位工作，请留下评论。

为了解释这段代码的作用，它遍历每个表格单元格，并检查它是否具有rowspan属性。如果没有，则继续下一个单元格。如果它确实有一个rowspan，那么它首先获取行本身，并将行数分配给该单元格。然后它会遍历每一行，递减给定的行数，直到它为零。对于它经过的每一行，它都会预先设置一个隐藏的单元格。该单元格将告诉JavaScript其他单元格位于另一列中，因此它将提供正确的坐标。

Answer 2

试试这个，

for(r = rowPos; r < table.rows.length; r++) {
    if(jQuery(table.rows[r]).attr('class') == 'rowsp'){
        colPos = 0;
    } else {
        colPos = item.cellIndex;
    }
    for(c = colPos; c < table.rows[r].cells.length; c++) {
        jQuery(table.rows[r].cells[c]).addClass("selected");
    }
}

表格单元格悬停和行跨

2 个答案: