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

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布兰特您指出缺少的表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>