jqueryによるtable操作

tableの操作 | よく使うjQuery

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



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です