Prototypeを使用してテーブル行を強調表示するにはどうすればよいですか？

Question

どのように私はプロトタイプライブラリを使用して、各テーブルの行タグにJavaScriptを配置するのではなく、各行にonmouseoverとonmouseoutイベントを注入する控えめなjavascriptを作成できますか？

（mootools、jQueryなどの代わりに）Prototypeライブラリを利用した回答が最も役立ちます。

Answer 1

<table id="mytable"> 
    <tbody> 
     <tr><td>Foo</td><td>Bar</td></tr> 
     <tr><td>Bork</td><td>Bork</td></tr> 

    </tbody> 
</table> 

<script type="text/javascript"> 

$$('#mytable tr').each(function(item) { 
    item.observe('mouseover', function() { 
     item.setStyle({ backgroundColor: '#ddd' }); 
    }); 
    item.observe('mouseout', function() { 
     item.setStyle({backgroundColor: '#fff' }); 
    }); 
}); 
</script> 

Answer 2

PrototypeのaddClassNameとremoveClassNameメソッドを使用できます。

ハイライトされた<tr>に適用されるCSSクラス "hilight"を作成します。次に、ページのロード時にこのコードを実行します。

var rows = $$('tbody tr'); 
for (var i = 0; i < rows.length; i++) { 
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); } 
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); } 
} 

Answer 3

あなたがそうのように、各行に何かを行うことができます：

$('tableId').getElementsBySelector('tr').each(function (row) { 
    ... 
}); 

ので、その関数の本体で、あなたはそれぞれへのアクセス権を持っています行、 '行'変数に一度に1つずつ。次に、このような何かがうまくいくかもしれない、だから、Event.observe（行、...）

を呼び出すことができます。

$('tableId').getElementsBySelector('tr').each(function (row) { 
    Event.observe(row, 'mouseover', function() {...do hightlight code...}); 
}); 

Answer 4

私は@swilliamsコードに若干の変更を加えました。

$$('#thetable tr:not(#headRow)').each(

これは私ががが強調表示されないことを見出し行を持つテーブルを持っていることができます。

<tr id="headRow"> 
    <th>Header 1</th> 
</tr> 

Answer 5

少し一般的な解決策：

のは、私が彼らの上にマウスポインタを置いたときにハイライト表示される行を持つテーブルを作成するための簡単な方法を持っているしたいとしましょう。理想的な世界では、これは一つだけの単純なCSSルールで、非常に簡単になります：

tr:hover { background: red; } 

は残念ながら、IEの古いバージョンではサポートしていない：A.以外の要素のホバーセレクターは、だから我々はJavaScriptを使用する必要があります。

その場合は、テーブルを「ハイライト可能」に設定して、ホバー可能な行を持つ必要があるテーブルをマークします。私はテーブルの行のクラス "ハイライト"を追加したり削除したりして、バックグラウンドの切り替えを行います。

CSS

table.highlightable tr.highlight { background: red; } 

（プロトタイプを使用して）JavaScriptの

// when document loads 
document.observe('dom:loaded', function() { 
    // find all rows in highlightable table 
    $$('table.highlightable tr').each(function(row) { 
     // add/remove class "highlight" when mouse enters/leaves 
     row.observe('mouseover', function(evt) { evt.element().addClassName('highlight') }); 
     row.observe('mouseout', function(evt) { evt.element().removeClassName('highlight') }); 
    }); 
}) 

HTML

あなたが今しなければならないすべては、いずれかに "highlightable" クラスを追加することですあなたが望むテーブル：

<table class="highlightable"> 
    ... 
</table> 

Answer 6

私は、JSなしでマウスの上に強調表示された行の背景に興味深い解決策を見つけました。ここにはlink

すべてのブラウザで動作します。 IE6/7/8の場合...

tr{ position: relative; } 
td{ background-image: none } 

Safariでは、各TDに負の背景位置を使用します。