テーブルの行を選択可能にする

Question

マウスの上にカーソルを置いたときにテーブルの行にハイライトの色をつけようとしていて、行全体を選択可能にしたい。 私が試してみました：

<tr onmouseover="ChangeColor(this, true);" 
       onmouseout="ChangeColor(this, false);" 
       onclick="DoNav('http://www.yahoo.com/');"> 

が、問題は、私は私のCSSスタイルシートで指定した色が自分である場合には効果がありません色これらの個々の行や色を変更するにはjavascriptのコードを外部CSSスタイルシートを持っているということです。 例えば、私は行を緑色で普通にし、上に置いてクリックすると白くハイライトします。緑色で指定された色を持つ場合は、マウスの上にマウスを置いても、常に緑色になります。もし私が緑色で指定された色を持っていなければ、javascriptが動作します。これはむしろ迷惑です。 また、私は交互に行の色を持っています。

誰でも簡単な解決方法を教えてもらえますか？

ここで私はonmousehoverとonmouseclickのために使っていたのjavascript機能：

function ChangeColor(tableRow, highLight) 
{ 
    if (highLight) 
    { 
     tableRow.style.backgroundColor = '#89ae37'; 
    } 
    else if (this.class == alt) 
    { 
     tableRow.style.backgroundColor = '#EAF2D3'; 
    } 
    else 
    { 
     tableRow.style.backgroundColor = '#A7C942'; 
    } 
} 

function DoNav(theUrl) 
{ 
    document.location.href = theUrl; 
} 

Answer 1

あなたはホバー効果を行うことができますスタイルシート：

tr:nth-child(odd) { background-color : #EAF2D3; } 
tr:nth-child(even) { background-color : #A7C942; } 
tr:hover { background-color : #89ae37; } 
​ 

デモ：あなたも指定する必要はありませんhttp://jsfiddle.net/nnnnnn/zHgsf/

注意:nth-child(odd)と:nth-child(even)セレクタがあなたのために世話をするので、代替の行にはclass="alt"があります。

Answer 2

このような行為はがアプリケーションのスタイリングではなく、配置することが私にはアウト叫び声任意のロジックを、提供しているようですJavaScriptではなくスタイルシートに変換します。あなたの例に一致するテーブルの強調表示の行全体を達成するために

は、CSSに：あなたはあなたのに次のようなものを置けば、すべてJSなしで

table tr { 
    background: #a7c942; 
} 
table tr:hover { 
    background: #89ae37; 
} 
table tr.alt:hover { 
    background: #eaf2d3; 
} 

Answer 3

これはjssを非常に簡単に追加することができますし、cssクラスを削除するだけで、バックグラウンドカラー以外のこともできます。ここではマウスオーバーの背景を変更するために私が作った例を示します。

http://jsfiddle.net/zHr4n/8/