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

スクリプトで行にホバーするのではなく、セルにホバーする方法を教えてください。

4

3 に答える 3

3

この目的のために通常のCSSを使用できます。

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

不足しているテーブルIDを指摘してくれた@MikeBrantに感謝します

于 2013-02-19T23:23:51.327 に答える
1

あなたの質問に答えるために...これはjQueryでこれを行う方法です：

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

もちろん、あなたの例はjQueryとは何の関係もありません。これは、jQueryを使用することでこれらがどれほど簡単になるかを思い出させるだけです。

于 2013-02-19T23:24:25.133 に答える
0

行がテーブルのリストにあるように、セルは行のリストにあります。

セルを取得するには、document.getElementById（'tfhover'）。rows [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>
于 2019-02-03T02:24:43.020 に答える