JQuery在悬停时更改表单元格和行背景颜色
JQuery Change Table Cell And Row Background Color On Hover
基本上,当我将鼠标悬停在表中的一行上时,我希望该行的背景色变为"黑色",而我悬停在其上的特定单元格或td变为"红色"。
悬停时会发生两个事件。我知道如何为其中一个或另一个做,但不是两者都做。
使用jquery可以做到这一点吗?
感谢大家的贡献,我代表大家。
简单的CSS就足够了:
tr:hover{
background-color:red
}
td:hover{
background-color:blue
}
http://jsfiddle.net/nRuXn/1/
$('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
});
将一些类添加到您想要变为红色的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");
});
});
向所有行和添加和删除类的td添加一个悬停侦听器,然后使用CSS为行和单元格设置不同的类样式。
工作演示
jQuery
$('tr, td').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
CSS
tr.highlight {
background-color: red;
}
td.highlight {
background-color: black;
}
如果行和单元格都在同一个容器中,则可以将mouseover事件附加到该容器并修改处理程序中的子级。
$("td").hover(function(){
$(this).css("background-color", "red");
$(this).parrent('tr').css("background-color", "black");
});
$(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>
相关文章:
- 表格单元格高度与背景高度匹配
- 谷歌工作表中的按钮,当单击时,会更改特定单元格的背景
- Google Apps 脚本:尝试根据单元格的背景颜色发送电子邮件
- 如何更改编辑单元格上方单元格的背景颜色(Javascript、Google电子表格)
- 单元格背景颜色不会更改 JavaScript
- jQuery - 单击时,单击时始终更改表格单元格的背景颜色
- 更改特定单元格的背景颜色
- 使用 ngHandsOnTable 更改单元格背景
- 单击事件以更改单元格背景
- 如何使用两个不同颜色的按钮更改表格单元格(td)的背景颜色
- JQuery在悬停时更改表单元格和行背景颜色
- 根据不同单元格上不同十六进制值的输入,为一个单元格生成多种颜色的背景
- 使用javascript,我如何得到一个表格单元格的背景颜色,当我点击它
- Javascript随机单元格背景颜色改变
- 如何根据单元格背景颜色的值仅更改为某些列
- 旧的javascript程序来改变文本和背景颜色的单元格
- 如何更改动态更改的单元格的背景和文本颜色
- 如何使用脚本更改单元格背景颜色的多个范围
- 谷歌应用程序脚本:找到单元格与一定的值,然后设置它的背景颜色
- jQuery更改单元格背景为红色的负值