表格单元格悬停和行跨度

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/的工作副本

问题是，当我在表中有行跨度时，我当前的脚本不起作用，请参阅这个有问题的 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'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 属性。如果没有，则继续下一个单元格。如果它确实有行跨度，那么它首先获取行本身，以及分配给单元格的行跨度。然后它遍历每一行，递减给定的行跨度，直到它为零。对于它经过的每一行，它都会预先添加一个隐藏单元格。该单元格会告诉 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");
    }
}