0


0

HTMLテーブル行で選択されたスタイルによってオーバーライドされるホバースタイル

複数の行がある単純なhtmlテーブルがあります。 以下が実装されています

1)行のmouseoverイベントのスタイルを指定したので、マウスがその上を移動すると強調表示されます。

2)各行にもチェックボックスがあります。 これが選択されると、チェックボックスが存在する行も異なる色で表示される必要があります。

問題は、チェックボックスをクリックした後に行の背景が変更されると、行のonmoseoverイベントに適用されたホバースタイルが適用されなくなることです。

コードは次のとおりです。

  tr { background: blue; }
  tr:hover { background:green; }




function Highlight(row)
{
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
    else
    {
        document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }
    }
}






Name

Age

25

aaaaaa

25

aaaaaa

25

解決策をいただければ幸いです。

5 Answer


2


あなたがそれをするようにあなたが言っていることをしているのです。

if(document.getElementById('chk').checked)
{
    document.getElementById(row).style.background='Red';
}
else
{
    document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }
}

あなたが言っている、それがチェックされている場合、それは赤です。 そうでない場合は、「ホバー可能」です。

修正するには、次のようになります。

CSS:

.hover { background:blue }
.hover:hover { background:green }
.hoverChecked { background:red }
.hoverChecked:hover { background:green }

JS:

if(document.getElementById('chk').checked) {
  document.getElementById(row).className = 'hoverChecked';
}
else {
  document.getElementById(row).className = 'hover';
}

HTMLを修正することもできます。



1


これはあなたが望むものです、

CSS-オプションI

 .yellow{ background:yellow; }

Javascript-オプションI

   function Highlight(row)
{
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).className += " yellow"document.getElementById(row).style.background='Red';
    }
    else
    {
        document.getElementById(row).className = document.getElementById(row).className.replace(/\byellow\b/,'')
    }

    document.getElementById(row).removeAttribute("style");
        document.getElementById(row).onMouseOver = function() { this.className += 'hover';

    hover'; }
    }
}

Javascript-オプションII

 function Highlight(row)
{
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
    else
    {
        document.getElementById(row).removeAttribute("style");
        document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }
    }
}

HTML



0


if..elseが原因です。

function Highlight(row)
{
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
}

elseパスはまったく必要ありません。 Cssは:hoverスタイルを自動的に適用します。


0


IE8-9互換性?

document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }

動作しませんie9。


0


問題が解決しました! htmlに次の行を追加します。