I have to highlight a table row on mouse over. Appears as an simple factor to complete, right? Especially using jQuery. But alas, I am not too lucky.

I have examined different solutions for highlighting a table row, but nothing appear to operate :-(

I've examined the next scripts:

// TEST one    
jQuery(document).ready(function() { 

  jQuery("#storeListTable tr").mouseover(function () { 
    $(this).parents('#storeListTable tr').toggleClass("highlight"); 
    alert('test'); // Just to test the mouseover event works
  }); 

});

//TEST 2
jQuery(document).ready(function() { 

   $("#storeListTable tbody tr").hover( 
     function() {  // mouseover 
          $(this).addClass('highlight'); 
     }, 
     function() {  // mouseout 
          $(this).removeClass('highlight'); 
     } 
   );
});

This really is my Web coding

<html> 
  <head> 
  <title>Title</title> 
  <link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
media="screen" charset="utf-8" /> 
  <script type="text/javascript" src="js/jquery.js" charset="utf-8"></ 
script> 
  </head> 
  <body> 

<table id="storeListTable"> 
    <thead> 
      <tr class="even"> 
        <th>ID</th> 
        <th>Navn</th> 
        <th>E-post</th> 
        <th>Nettside</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr class="" id="store1"> 
        <td>10</td> 
        <td>Boss Store Oslo</td> 
        <td> <a href="mailto:">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="" id="store3"> 
        <td>8</td> 
        <td>Brandstad Oslo City</td> 
        <td> <a href="mailto:a@brandstad.no">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="even" id="store4"> 
        <td>7</td> 
        <td>Fashion Partner AS</td> 
        <td> <a href="mailto:b@fashionpartners.com">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="" id="store5"> 
        <td>1</td> 
        <td>Follestad</td> 
        <td> <a href="mailto:c@online.no">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="even" id="store6"> 
        <td>2</td> 
        <td>Follestad</td> 
        <td> <a href="mailto:d@follestad.com">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
    </tbody> 
  </table> 
  </body> 
</html>

So.... could anybody produce a push within the right direction?

Once, I discovered this solution - works perfectly - just add! Regrettably, I don't be aware of author :(

<script type="text/javascript">

    $("#table_id").not(':first').hover(
        function () {
            $(this).css("background","red");
        }, 
        function () {
            $(this).css("background","");
        }
    );

    </script>

+1 wheresrhys. Utilizing a background rule on .highlight td made your ‘TEST 2’ work acceptable for me.

‘TEST 1’ will not, due to the unwanted parents() call.

May be the alert message really appearing whenever you test?

If that's the case, it is possible the issue is together with your CSS. It required us a very long time to understand that many styles put on a tr tag haven't any effect. So, generally, you have to apply styles to every td within the row

.highlight td {highlighted appearance}

instead of

.highlight {highlighted appearance}

If you do not need IE6 support, the highlighting can be achieved with a few simple CSS:

#table tr:hover {
  background-color: #ff8080;
}

Do this wordpress plugin http://p.sohei.org/jquery-plugins/columnhover/

Here's the way you utilize it.

<script type="text/javascript"> 
    $(document).ready(function()
    {
        $('#storeListTable').columnHover({ hoverClass:'highlight'});
    });
</script>

Be mindful