マウスオーバーした時に表の行列の背景色を変えるjqueryのメモ。
行の色だけでなく、列の色も変わるようにしたかったので。
今回はjqueryを使った方法です。
jqueryの場合
実際の見え方
発売日 | 題名 | おススメ度 |
---|---|---|
2017/11/26 | サンプル1 | ★★★☆ |
2017/12/20 | サンプル2 | ★★☆☆ |
2018/12/25 | サンプル3 | ★★★★ |
サンプルコード
HTMLコード
<table id="hover_sample"> <tr><th>発売日</th><th>題名</th><th>おススメ度</th></tr> <tr><td>2017/11/26</td><td>サンプル1</td><td>★★★☆</td></tr> <tr><td>2017/12/20</td><td>サンプル2</td><td>★★☆☆</td></tr> <tr><td>2018/12/25</td><td>サンプル3</td><td>★★★★</td></tr> </table>
※特定の表の色を変更するためにIDを指定しています。
javascriptコード
$(function () { $("table#hover_sample td").hover(function () { var idx = $(this).index() + 1; var tds = $(this).closest("table#hover_sample").find("td:nth-child(" + idx + ")"); tds.css("background-color", "aqua"); $(this).css("background-color", "skyblue"); $(this).siblings().css('background', 'aqua'); }, function () { var idx = $(this).index() + 1 var tds = $(this).closest("table#hover_sample").find("td:nth-child(" + idx + ")"); tds.css("background-color", ""); $(this).css("background-color", ""); $(this).siblings().css('background', ''); }); });
※特定の表の色を変更するためにIDを指定しています。
ちなみに、行の色を変えるだけならCSSでスタイルを指定するだけで可能です。
cssコード
tr:hover{background-color:darkblue;color:white;}