jQueryでホバーのテーブル行レコードを強調表示する方法
jQueryにはhover()マウスイベントが付属しており、一致した要素に2つのイベントハンドラーをアタッチできます。これは、マウスが一致した要素に出入りするときに実行されます。
$("#id").hover(A, B);
-
A-マウスが一致した要素に入ったときに呼び出す関数。
-
B –マウスが一致した要素を離れたときに呼び出す関数。
これは、テーブルの行レコードを強調表示するのに最適な機能です。 jQueryスニペットコードを参照してください。
$("tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
ホバー時にテーブル行レコードが黄色の色で強調表示されます。 「.not(‘:first’)」は、ヘッダー行レコードの強調表示を回避するための一般的な実装です。
自分で試してください
Highlight table row record on hover - jQuery
| No | Name | Age | Salary |
|---|---|---|---|
| 1 | Yong Mook Kim | 28 | $100,000 |
| 2 | Low Yin Fong | 29 | $90,000 |
| 3 | Ah Pig | 18 | $50,000 |
| 4 | Ah Dog | 28 | $40,000 |
| 5 | Ah Cat | 28 | $30,000 |