jQuery: ストライプテーブルの作り方(2)

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;
}

/* 選択行 */
.select {
    background-color: lightcyan;
}

JavaScript


$(document).ready(function(){
    
    // 偶数行
    $('tr:even').addClass('even');
    
    // 奇数行
    $('tr:odd').addClass('odd');
    
    // mouseover
    $('tr').on('mouseover', function(){
        $(this).addClass('select');
    });
    
    // mouseout
    $('tr').on('mouseout', function(){
       $(this).removeClass('select'); 
    });

});

コード解説

htmlファイルは前回と同じです。cssファイルは選択行の背景色を追加しています。

選択行の背景色を変える


    // mouseover
    $('tr').on('mouseover', function(){
        $(this).addClass('select');
    });
    
    // mouseout
    $('tr').on('mouseout', function(){
       $(this).removeClass('select'); 
    });

マウスカーソルがのったときにクラスを追加し、マウスカーソルがはずれたときにクラスを削除します。 ロジックは上の通りですが、他にもhover()メソッドを使って記述してもよいでしょう。 その場合は次のようになります。


    // hover
    $('tr').hover(function () {
        $(this).addClass('select');
    },function () {
        $(this).removeClass('select'); 
    });
jQuery入門