JQuery Change Table Cell And Row Background Color On Hover

Question

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'.

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?

Thx to everyone for their contribution, I've repped you all.

Answer 1

Simple CSS is enough:

tr:hover{
 background-color:red
}

td:hover{
background-color:blue
}

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

Answer 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
});

Answer 3

Add some class to that td that you want to be red (lets call that class 'rdClass') and the row '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");
    });
});

Answer 4

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.

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;
}

Answer 5

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

Answer 6

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

Answer 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>