jQuery - 更改悬停时的表格行颜色，使悬停事件起作用

Question

我想使用 jQuery 通过更改颜色来突出显示表格行。进行过 RTFM、广泛的实验和研究，但运气不佳。

HTML:

<table id="waypointsTable" border="1">
<tbody>
<tr>
<td>some text</td>
</tr> ...

JavaScript:

$('#waypointsTable > tbody > tr > td').hover(function() {
    alert(1);
}, function() {
    alert(2);
});

此时我只是想触发悬停功能。悬停应该与 tr 还是 td 绑定(bind)？选择表行和 td 时是否始终必须包含 tbody 引用？在每个 tr 或 td 上放置一个类而不是上述方法更好吗？

谢谢。

Answer 1

大部分看起来都不错，如果你想为每一行触发，你可以直接绑定(bind)到tr。

只是:

$('#waypointsTable tr').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

(完整代码位于 http://jsfiddle.net/nicholasstephan/8nbVG/ )

应该可以...

对于这种情况，使用 css :hover 伪选择器也可以完成这项工作。

#waypointsTable tr:hover {
    background-color:yellow;
}