ストライプテーブルの作り方

jQueryでストライプテーブルを作ります。
ストライプテーブルはテーブルデータが見やすくなるのでおすすめです。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

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で直接背景色を変更するのではなく、クラスを追加することで背景色を変えます。こうすることで ロジックとデザイン部分を分離させることができます。

実践編

小技編

メソッド

関連サイト