JQuery在悬停时更改表格单元格和行背景颜色答案

【问题标题】：JQuery Change Table Cell And Row Background Color On HoverJQuery在悬停时更改表格单元格和行背景颜色
【发布时间】：2013-07-29 16:04:17
【问题描述】：

基本上，当我将鼠标悬停在表格中的一行上时，我希望该行的背景颜色更改为“黑色”，而我将鼠标悬停在特定单元格或 td 上以更改为“红色”。

也就是说，当悬停时会发生两个事件。我知道如何为其中之一做，但不知道两者都做。

这可以使用 jquery 吗？

感谢大家的贡献，我已经表扬了你们。

【问题讨论】：

你有什么理由不能只使用 css 吗？ jsfiddle.net/4STXa
如果您可以在同一个函数中为单元格着色，为什么不获取父行并对其进行着色呢？喜欢$(this).addClas("red"); $(this).closest("tr").addClass("black");

标签： javascript jquery

【解决方案1】：

简单的 CSS 就足够了：

tr:hover{
 background-color:red
}

td:hover{
background-color:blue
}

http://jsfiddle.net/nRuXn/1/

【讨论】：

在我自己的一些经验之后，每当有人谈论hover，mouseover-mouseout，mouseenter-mouseleave时，我开始只考虑CSS悬停。

【解决方案2】：

$('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
});

【讨论】：

【解决方案3】：

在 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");
    });
});

【讨论】：

【解决方案4】：

为添加和删除类的所有行和 td 添加悬停侦听器，然后使用 CSS 为行和单元格设置不同的样式。

Working Demo

jQuery

$('tr, td').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

CSS

tr.highlight {
    background-color: red;
}

td.highlight {
    background-color: black;
}

【讨论】：

【解决方案5】：

如果行和单元格都在同一个容器中，您可以将鼠标悬停事件附加到该容器并修改处理程序中的子项。

【讨论】：

【解决方案6】：

$("td").hover(function(){
  $(this).css("background-color", "red");
  $(this).parrent('tr').css("background-color", "black");
});

【讨论】：

【解决方案7】：

$(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">&nbsp;</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>

【讨论】：

请不要只发布一段代码。解释您的答案，以便人们了解您的解决方案为何能解决问题。