jQuery: ストライプテーブルの作り方
jQueryでストライプテーブルを作ります。
ストライプテーブルはテーブルデータが見やすくなるのでおすすめです。
動作サンプル、サンプルコード、コード解説の順番で記述しています。
サンプル
地名 | 郵便番号 |
---|---|
浅利町 | 695-0002 |
跡市町 | 695-0152 |
有福温泉町 | 695-0156 |
有福温泉町本明 | 695-0155 |
井沢町 | 695-0154 |
後地町 | 699-2841 |
敬川町 | 699-3162 |
嘉久志町 | 695-0016 |
金田町 | 695-0012 |
川平町 平田 | 695-0014 |
川平町 南川上 | 695-0013 |
黒松町 | 699-2831 |
html
<table>
<tr><th>地名</th><th>郵便番号</th></tr>
<tr><td>浅利町</td><td>695-0002</td></tr>
<tr><td>跡市町</td><td>695-0152</td></tr>
<tr><td>有福温泉町</td><td>695-0156</td></tr>
<tr><td>有福温泉町本明</td><td>695-0155</td></tr>
<tr><td>井沢町</td><td>695-0154</td></tr>
<tr><td>後地町</td><td>699-2841</td></tr>
<tr><td>敬川町</td><td>699-3162</td></tr>
<tr><td>嘉久志町</td><td>695-0016</td></tr>
<tr><td>金田町</td><td>695-0012</td></tr>
<tr><td>川平町 平田</td><td>695-0014</td></tr>
<tr><td>川平町 南川上</td><td>695-0013</td></tr>
<tr><td>黒松町</td><td>699-2831</td></tr>
</table>
CSS
table, th, td {
border: solid 1px silver; /* 枠線 */
}
th {
background-color: lightgray;
}
/* 偶数行の設定*/
.even {
background-color: beige;
}
/* 奇数行の設定 */
.odd {
background-color: white;
}
JavaScript
$(document).ready(function(){
// 偶数行
$('tr:even').addClass('even');
// 奇数行
$('tr:odd').addClass('odd');
});
コード解説
クラスの追加
// 偶数行
$('tr:even').addClass('even');
// 奇数行
$('tr:odd').addClass('odd');
jQueryにはeven、oddという便利なフィルタがあります。偶数行をevenで取得し、奇数行をoddで取得します。 そして、addClass()メソッドを使ってクラスを追加するだけです。背景色はCSS側で記述しています。
jQueryで直接背景色を変更するのではなく、クラスを追加することで背景色を変えます。こうすることで ロジックとデザイン部分を分離させることができます。