tableでよく使うスクリプトサンプルを2つ
1つ目はtableの行に対してhover設定(背景色の変更)を行なう方法。
table行のhover設定
■html
<table id="tbl1"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr> </table>
■javascript
$(function() { $("#tbl1 td").hover(function() { $(this).siblings().css('background', 'yellow').add(this).css('background', 'yellow'); }, function() { $(this).siblings().css('background', 'white').add(this).css('background', '#eee'); }); });
■サンプル
a | b | c |
d | e | f |
g | h | i |
解説
「hover(第一引数,第二引数)」と記述すると、マウスオーバー時に第一引数を実行し、マウスオーバー時に第二引数を実行します。
今回は第一因数で、マウスカーソルが乗ったtdの兄弟要素の背景色を’yellow’にし自身の背景色も’yellow’にすると記述しました。$(this).siblings().css('background', 'yellow').add(this).css('background', 'yellow');更に第二引数で、マウスカーソルがはずれたtdの兄弟要素の背景色を’#eee’にし自身の背景色も’#eee’にと指定することで行のハイライトを表現しています。
$(this).siblings().css('background', 'yellow').add(this).css('background', '#eee');
table行の背景色を互い違いにする。
■html
<table id="tbl2"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr> </table>
■javascript
$(function() { $("#tbl2 tr:odd td").css('background', 'red'); });
■サンプル
a | b | c |
d | e | f |
g | h | i |
解説
「:odd」はインデックスが奇数のもの、「:even」はインデックスが偶数のもと合致します、今回は「:odd」で奇数行を指定しています。