Javascript 表格单元格悬停和行跨度

我有一个JavaScript的工作示例，它在表单元格上单击选择当前单元格，并选择右侧和底部的所有单元格。下面是JSFIDLE及其工作代码：

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

函数选择单元格（项目）{
var cell=item.parentNode，
表=cell.parentNode，
rowPos=cell.rowIndex，
colPos=item.cellIndex；
$（表）.find（'td'）.removeClass（'selected'）；
对于（r=rowPos；r

检查工作副本

问题是，当我的表中有rowspan时，我的当前脚本无法工作，请参阅以下JSFIDLE with problem：

我真的被卡住了，也许你知道怎么解决这个问题吗？

试试这个

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

for（r=rowPos；r

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

在谷歌搜索了这个之后，我最终发现了，但是。然后，在进行了更具体的搜索之后，我最终找到了，基本上是说“你需要一个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>');
    }
});

$（'#演示表td'）。每个（函数（）{
如果（！$（this）.is（“[rowspan]”）返回；
var i=+$（this.attr（'rowspan'）；
var$nextRow=$（this.parent（'tr'）；
而（$nextRow=$nextRow.next（））&&--i>0）{
$nextRow.prepend（“”）；
}
});

我在这里假设定义了

colspan

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

---

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

问得好！这看起来确实是一个复杂的问题，但我会设法找到解决办法。坚持住！谢谢@joetje50，它真的很有效，在我确认它有用之前，让我试着在我的脚本中实现它：）就像一个符咒一样工作。这就是为什么我喜欢stackoverflow！：）谢谢，伙计