Question

我的表格在行上有悬停功能，我试图将其更改为悬停在单元格上

这是我当前的剧本：

<script type="text/javascript">
    window.onload=function(){
    var tfrow = document.getElementById('tfhover').rows.length;
    var tbRow=[];
    for (var i=1;i<tfrow;i++) {
        tbRow[i]=document.getElementById('tfhover').rows[i];
        tbRow[i].onmouseover = function(){
          this.style.backgroundColor = '#f3f8aa';
        };
        tbRow[i].onmouseout = function() {
          this.style.backgroundColor = '#ffffff';
        };
    }
};
</script>

这里我到目前为止尝试改变但仍然没有工作：

<script type="text/javascript">
    window.onload=function(){
    var tfcell = document.getElementById('tfhover').cells.length;
    var tbCell=[];
    for (var i=1;i<tfcell;i++) {
        tbCell[i]=document.getElementById('tfhover').cells[i];
        tbCell[i].onmouseover = function(){
          this.style.backgroundColor = '#f3f8aa';
        };
        tbCell[i].onmouseout = function() {
          this.style.backgroundColor = '#ffffff';
        };
    }
};
</script>

如何使用我的脚本实现在单元格上悬停而不是悬停在行上？

Answer 1

您可以使用常规CSS来实现此目的：

#tfhover td {
    background-color: #fff;
}
#tfhover td:hover {
    background-color: #f3f8aa;
}

感谢@Mike Brant指出丢失的表ID

Answer 2

回答你的问题......这是如何用jQuery做的：

$('#tfhover td').hover(function() {
    $(this).css('background-color', '#fsf8aa');
}, function () {
    $(this).css('background-color', '#ffffff');
});

当然你的例子与jQuery无关。它只是提醒这些东西使用jQuery变得多么简单。

Answer 3

单元格在行列表中，就像行在表列表中一样。

要获得的细胞，仅有的的document.getElementById（ 'tfhover'）。行[I] .cells [j]的。既列出了从0开始。

<script type="text/javascript"> window.onload=function(){ var tfrow = document.getElementById('tfhover').rows.length; var tbRow=[]; for (var i=1;i<tfrow;i++) { tbRow[i]=document.getElementById('tfhover').rows[i]; var tfcell=tbRow[i].cells.length; for(var j=0;j<tfcell;j++){ var _tbCell=tbRow[i].cells[j]; _tbCell.onmouseover=function(){ this.style.backgroundColor = '#f3f8aa'; } _tbCell.onmouseout=function(){ this.style.backgroundColor = '#ffffff'; } } } }; </script>

如何使用Javascript将鼠标悬停在表格单元格上？

3 个答案: