tableの操作 | よく使うjQuery

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」で奇数行を指定しています。