Alex Rivera | Logout

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

Asked 2011-11-01T18:28:17.847
14

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.

Edit
Report

1 Answer

6
<script type="text/javascript">

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

</script>

Demo

answered 2013-08-01T11:41:39.690

Your Answer