javascript JQuery 在悬停时更改表格单元格和行背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17928756/
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 Cell And Row Background Color On Hover
提问by Nuvolari
Basically when I hover over a row in my table i want the background color of the row to change to say 'black' and the specific cell or td I am hovering over to change to 'red'.
基本上，当我将鼠标悬停在表格中的一行上时，我希望该行的背景颜色更改为“黑色”，而我将鼠标悬停在特定单元格或 td 上以更改为“红色”。
Ie so two events occur when hovering. I know how to do it for one or the other but not both.
即悬停时会发生两个事件。我知道如何为一个或另一个但不知道如何做到这一点。
Is this possible using jquery?
这可以使用jquery吗？
Thx to everyone for their contribution, I've repped you all.
感谢每个人的贡献，我已经回复了你们所有人。
采纳答案by Nuvolari
Simple CSS is enough:
简单的 CSS 就足够了：
tr:hover{
background-color:red
}
td:hover{
background-color:blue
}
回答by Nuvolari
$('td').hover( function() {
$(this).parent().children().css("background-color", "black");
$(this).css("background-color", "red")
});
$('tr').mouseleave( function() {
$(this).children('td').css("background-color", "white");// or whatever
});
回答by Armen
Add some class to that td that you want to be red (lets call that class 'rdClass') and the row 'blkClass':
将一些类添加到您想要变为红色的 td（让我们称该类为“rdClass”）和“blkClass”行：
<table>
<tr class='rdClass'>
<td>
1
</td>
<td class='blkClass'>
2
</td>
<td>
3
</td>
</tr>
</table>
$(document).ready(function ()
{
$(".rdClass").mouseover(function ()
{
$(this).css("background-color", "red");
});
$(".blkClass").mouseover(function ()
{
$(this).css("background-color", "black");
});
});
回答by cfs
Add a hover listener to all rows and td's that adds and removes a class, then use CSS to style that class differently for a row and cell.
向添加和删除类的所有行和 td 添加一个悬停侦听器，然后使用 CSS 为行和单元格设置不同的类样式。
jQuery
jQuery
$('tr, td').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
CSS
CSS
tr.highlight {
background-color: red;
}
td.highlight {
background-color: black;
}
回答by Alireza
$("td").hover(function(){
$(this).css("background-color", "red");
$(this).parrent('tr').css("background-color", "black");
});
回答by user2483173
If both the row and cell are in the same container, you could attach a mouseover event to that container and modify the children in the handler.
如果行和单元格都在同一个容器中，您可以将鼠标悬停事件附加到该容器并修改处理程序中的子项。
回答by Mrugesh Vyas
$(function() {
$(".tablecell").on('mouseover', function(event) {
$(".tablerow td").removeClass('hoveColBgColor hoveRowBgColor');
$(this).parent('tr.tablerow').children('td:gt(0)').addClass('hoveRowBgColor');
$('.tablerow > td:nth-child('+($(this).index()+1)+')').addClass('hoveRowBgColor');
});
$(".tablerow").on('mouseout', function(event) {
$(".tablerow").children('td:gt(0)').removeClass('hoveRowBgColor');
$(".tablerow td").removeClass('hoveColBgColor hoveRowBgColor');
});
});.hoveRowBgColor{
background-color:#ccc;
}
.hoveColBgColor{
background-color:#666;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="table1" width="100%" cellspacing="1" cellpadding="0" bordercolor="" border="0">
<tbody>
<tr class="tablerow">
<td class="whiteZone"> </td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
</tr>
<tr class="tablerow">
<td class="menuZone">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
</tbody>
</table>