テーブルの偶数列に背景を自動で敷くスクリプト

jQuery2010年12月20日

よく列の多いでテーブルなどのデザインで、見やすくするためにセルをストライプ模様にしたい時があります。そういった場合、jQueryを活用することで簡単に実現する事ができます。

• jQueryはこちらからダウンロード
• 実際のサンプル

HTML

<table cellspacing="0" cellpadding="0" border="0" id="tbl-test">
<tr>
<td>テストテストテスト</td>
<td>テストテストテスト</td>
<td>テストテストテスト</td>
</tr>
<tr>
<td>テストテストテスト</td>
<td>テストテストテスト</td>
<td>テストテストテスト</td>
</tr>
<tr>
<td>テストテストテスト</td>
<td>テストテストテスト</td>
<td>テストテストテスト</td>
</tr>
</table>

Javascript

$(function(){
$("#tbl-test tr:even").addClass("even");
});

CSS

table#tbl-test tr.even td{
background:#efefef;
}

偶数列のtrに自動でclass="even"を付加する、といった処理をしています。
これを使えば、わざわざ一つ一つのtrに手動でクラスを付加する必要がなくなるので、列が増えた場合などのメンテナンスも容易になります。また、システムで出力するような場合でも重宝します。
またテーブルでなくとも、リストでも使えるので汎用性も高いです。

• ナビゲーションのカテゴリを自動でアクティブにする（テキスト版）
• チェックボックスの一括チェック（全選択）／一括解除（全解除）

この記事を読んでいる方にオススメの記事

• jQuery超便利！jQueryでJSONデータを解析し、HTMLに表示する／前編
• jQueryjQueryでテーブルをラジオボタンでソート（プラグインなし）
• jQueryjQueryでタブメニューを実装（テキストメニュー版）
• jQueryニュースティッカーをjQueryで実装する／jquery.slider編
• jQueryグローバルナビゲーションのカテゴリを自動でアクティブにする
• jQueryニュースティッカーをjQueryで実装する／bxslider編

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。