jQuery - 在悬停时更改表格行颜色，使悬停事件起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7971075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - change table row color on hover, getting hover events to work
提问by bethesdaboys
I want to highlight a table row by changing its color, using jQuery. Have RTFM'd, experimented and researched extensively with little luck.
我想通过使用 jQuery 更改其颜色来突出显示表格行。有 RTFM'd，试验和广泛研究，但运气不佳。
HTML:
HTML：
<table id="waypointsTable" border="1">
<tbody>
<tr>
<td>some text</td>
</tr> ...
javascript:
javascript:
$('#waypointsTable > tbody > tr > td').hover(function() {
alert(1);
}, function() {
alert(2);
});
At this point I'm just trying to get the hover functions to fire. Should hover be tied to the tr or the td? Do I always have to include the tbody reference when selecting table rows and td's? Is it better to put a class on each tr or td instead of the above approach?
在这一点上，我只是想让悬停功能触发。悬停应该绑定到 tr 还是 td ？在选择表行和 td 时，我是否总是必须包含 tbody 引用？在每个 tr 或 td 上放置一个类而不是上述方法更好吗？
Thanks.
谢谢。
回答by nicholas
Looks fine for the most part, if you want to trigger for each row, you can bind to the tr directly.
大部分看起来不错，如果你想为每一行触发，你可以直接绑定到 tr 。
just:
只是：
$('#waypointsTable tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
(full code at http://jsfiddle.net/nicholasstephan/8nbVG/)
（完整代码在http://jsfiddle.net/nicholasstephan/8nbVG/）
should work...
应该管用...
For this case specifically, using a css :hover pseudo selector would do the job too.
对于这种情况，使用 css :hover 伪选择器也可以完成这项工作。
#waypointsTable tr:hover {
background-color:yellow;
}
回答by bpbhat77
回答by Bharath Kumaar
Here is some useful links.For more reference and demosee the below link.
这是一些有用的链接。有关更多参考和演示，请参阅以下链接。
jQuery Change table row color on hover, getting hover events to work
JS:
JS：
$(function () {
$("tr:not(:has(th))").mouseover(function () {
$(this).addClass("hover");
});
$("tr:not(:has(th))").mouseleave(function () {
$(this).removeClass("hover");
});
});
CSS:
CSS：
.hover
{
background-color: #81B441;
}
HTML :
HTML :
<table class="tblBorder" border='1'>
<tr class="hover"><th>No</th><th>Page Name</th><th>No of View</th><th>Comments</th></tr>
<tr><td>1</td><td>Java Script</td><td>28</td><td>10</td></tr>
<tr><td>2</td><td>CSS</td><td>29</td><td>78</td></tr>
</table>
回答by Tan Nguyen
Another way
其它的办法
$('#waypointsTable tr').hover(function() {
$(this).toggleClass('hover');
});
css style
css样式
.hover {
background-color:green;
}
回答by Marc B
If you want to change the color of the row when it's hovered over, then put the :hover on the row itself. However, note that rows themselves can't have background colors, only cells, so in CSS terms, you'd need this:
如果您想在将鼠标悬停在行上时更改行的颜色，请将 :hover 放在行本身上。但是，请注意，行本身不能具有背景颜色，只能具有单元格，因此在 CSS 术语中，您需要以下内容：
tr td { background: normal background style here }
tr:hover td { background: hovered background style here}
回答by Cams
This will add and remove the css, but this will not do this for the top table row. e.g. your heading row.
这将添加和删除 css，但这不会对顶部表格行执行此操作。例如你的标题行。
$("#waypointsTable tr").not(':first').hover(function(){
$(this).addClass("tr-hover");
},function(){
$(this).removeClass("tr-hover");
}
);
回答by obotezat
If you want to trigger the event for future added rows you could use
如果您想为将来添加的行触发事件，您可以使用
$("#table_id").on("mouseover", 'tr' function () {
//stuff to do on mouseover
});
回答by rogerlsmith
Not sure, but try putting a div with either a class or id inside the and see if that helps.
不确定，但尝试在其中放置一个带有类或 id 的 div，看看是否有帮助。
