表格单元格悬停和rowspan

我有一个JavaScript的工作示例，它在表格单元格点击选择当前单元格和所有的权利和底部。下面是的jsfiddle与工作代码：表格单元格悬停和rowspan

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/

我真的陷入困境，也许你们有想法如何解决这个问题？

来源

2014-02-09 di3sel

不错的问题！这看起来确实是一个复杂的问题，但我会尝试寻找解决方案。挂在那里！ – Joeytje50

现在看来似乎不承认细胞，因为它们基本上是第一，第二和第三排他们的。

谷歌搜索后，我结束了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其他单元格在另一列中，所以它会给出正确的坐标。

来源

2014-02-09 15:58:47 Joeytje50

谢谢@ Joeytje50，它真的工作，让我试着在我的脚本中实现它，然后我确认它有帮助:) – di3sel

工程就像一个魅力。这就是为什么我喜欢stackoverflow！：）谢了哥们 – di3sel

试试这个，

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

来源

2014-02-09 15:52:46

表格单元格悬停和rowspan

回答

相关问题