javascript - 表格单元格悬停和行跨度

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

它似乎无法识别单元格，因为它们基本上是第一行、第二行和第三行。

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

要解决此问题，我只需在每个 colspan 元素下方添加一个隐藏的 (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，那么它首先获取行本身，然后将 rowspan 分配给单元格。然后它遍历每一行，递减给定的行跨度，直到它为零。对于它经过的每一行，它都会在前面加上一个隐藏的单元格。该单元格会告诉 JavaScript 其他单元格在另一列中，因此它会给出正确的坐标。