jQuery: ストライプテーブルの作り方(2)
jQueryでストライプテーブルを作ります。その2。
今回は、テーブルデータにマウスカールをのせると、行の色が変化。
動作サンプル、サンプルコード、コード解説の順番で記述しています。
動作サンプル
地名 | 郵便番号 |
---|---|
浅利町 | 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');
});