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

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

这是我当前的脚本：

<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>

window.onload=function（）{
var tfrow=document.getElementById（'tfhover'）.rows.length；
var-tbRow=[]；
对于（var i=1；i，您可以为此使用常规CSS：

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

感谢@Mike Brant指出缺少的表id
，您可以为此使用常规CSS：

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

感谢@Mike Brant指出缺少的表id来回答您的问题…这是如何使用jQuery实现的：

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

当然，您的示例与jQuery无关。它只是提醒您使用jQuery时这些事情变得多么简单。
要回答您的问题…如何使用jQuery实现这一点：

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

当然，您的示例与jQuery无关。它只是提醒您使用jQuery时这些事情变得多么简单。
单元格在行列表中，正如行在表列表中一样

要获取单元格，只需document.getElementById（'tfhover'）。行[i]。单元格[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>


window.onload=function（）{
var tfrow=document.getElementById（'tfhover'）.rows.length；
var-tbRow=[]；
对于（var i=1；i单元格位于行列表中，正如行位于表列表中一样

要获取单元格，只需document.getElementById（'tfhover'）。行[i]。单元格[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>


window.onload=function（）{
var tfrow=document.getElementById（'tfhover'）.rows.length；
var-tbRow=[]；
对于（var i=1；ii，如果您想要jQuery，那么$（“td”）.hover（）如何？如果您想要jQuery，那么$（“td”）.hover（）如何？一个非常好的替代解决方案，尽管我认为在他的例子中CSS选择器应该是
#tfhover td
和
#tfhover td:hover
。一个非常好的替代解决方案，尽管我认为在他的例子中CSS选择器应该是
#tfhover td
和
#tfhover td:hover
。你能检查一下吗，因为你的代码很高请用灯光而不是鼠标悬停，或者更正我。@Leo您的示例根本没有jQuery，我看到您已将问题更新为不再包含jQuery。如果不使用jQuery，我将使用CSS选项。您是否可以检查此项，因为您的代码将高亮显示而不是鼠标悬停，或者更正我。@Leo您的示例根本没有jQuery，并且我看到您已经更新了您的问题，不再包含jQuery。如果不使用jQuery，我将使用CSS选项。