CODEWITHSUNDEEP
jquery
bethesdaboys
bethesdaboys

Reputation: 1827

jQuery - change table row color on hover, getting hover events to work

I want to highlight a table row by changing its color, using jQuery. Have RTFM'd, experimented and researched extensively with little luck.

HTML:

<table id="waypointsTable" border="1">
<tbody>
<tr>
<td>some text</td>
</tr> ...

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?

Thanks.

Upvotes: 14

Views: 80554

Answers (8)

Barath Kumar
Barath Kumar

Reputation: 439

Here is some useful links.For more reference and demo see the below link.

jQuery Change table row color on hover, getting hover events to work

JS:

$(function () {
    $("tr:not(:has(th))").mouseover(function () {
        $(this).addClass("hover");
    });
    $("tr:not(:has(th))").mouseleave(function () {
        $(this).removeClass("hover");
    });
});

CSS:

  .hover
    {
        background-color: #81B441;
    }

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>

Upvotes: 2

Tan Nguyen
Tan Nguyen

Reputation: 21

Another way

   $('#waypointsTable tr').hover(function() {
          $(this).toggleClass('hover');
    });

css style

.hover {
    background-color:green;
}

Upvotes: 2

obotezat
obotezat

Reputation: 1135

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

Upvotes: 2

bpbhat77
bpbhat77

Reputation: 529

<script type="text/javascript">

$("tr").not(':first').hover(
  function () {
    $(this).css("background","yellow");
  }, 
  function () {
    $(this).css("background","");
  }
);

</script>

Demo

Upvotes: 6

Cams
Cams

Reputation: 1

This will add and remove the css, but this will not do this for the top table row. e.g. your heading row.

$("#waypointsTable tr").not(':first').hover(function(){
 $(this).addClass("tr-hover");
   },function(){
    $(this).removeClass("tr-hover");
   }
);

Upvotes: 0

Marc B
Marc B

Reputation: 360632

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:

tr td { background: normal background style here }
tr:hover td { background: hovered background style here}

Upvotes: 4

nicholas
nicholas

Reputation: 14563

Looks fine for the most part, if you want to trigger for each row, you can bind to the tr directly.

just:

$('#waypointsTable tr').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

(full code at http://jsfiddle.net/nicholasstephan/8nbVG/)

should work...

For this case specifically, using a css :hover pseudo selector would do the job too. 

#waypointsTable tr:hover {
    background-color:yellow;
}

Upvotes: 35

rogerlsmith
rogerlsmith

Reputation: 6786

Not sure, but try putting a div with either a class or id inside the and see if that helps.

Upvotes: -1

Related Questions