プロトタイプを使用してテーブルの行を強調表示するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/52238

  •  09-06-2019
  •  | 
  •  

質問

プロトタイプ ライブラリを使用して、表の各行タグに JavaScript を入れるのではなく、onmouseover および onmouseout イベントを各行に注入する控えめな JavaScript を作成するにはどうすればよいですか?

(mootools、jQuery などの代わりに) プロトタイプ ライブラリを利用した回答が最も役立ちます。

役に立ちましたか？

解決 

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

他のヒント

プロトタイプを使用できます addClassName そして removeClassName 方法。

強調表示された部分に適用する CSS クラス「hilight」を作成します。 <tr>さんの。次に、ページの読み込み時にこのコードを実行します。

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'); }  
}

少し一般的な解決策:

マウス ポインターを上に置くと強調表示される行を含む表を簡単に作成する方法が必要だとします。理想的な世界では、これは 1 つの単純な CSS ルールだけで非常に簡単になります。

tr:hover { background: red; }

残念ながら、IE の古いバージョンでは、A 以外の要素の :hover セレクターがサポートされていません。したがって、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>

少し変更を加えました @スウィリアムズ コード。

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

これにより、ヘッダー行を含むテーブルが得られます。 しません ハイライトされる。

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

次のように、各行に対して何かを行うことができます。

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

したがって、その関数の本体では、「row」変数内の各行に一度に 1 つずつアクセスできます。その後、Event.observe(row, ...) を呼び出すことができます。

したがって、次のようなものが機能する可能性があります。

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

JSを使用せずに、行の背景、マウスオーバーで行を強調表示するための興味深い解決策を見つけました。ここは リンク

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

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

そして、Safari では、TD ごとに負の背景位置を使用します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top