jQuery highlight table row

5 Views

I need to highlight a table row on mouse over. Seems like an easy enough thing to do, right? Especially using jQuery. But alas, I’m not so lucky.

I’ve tested different solutions for highlighting a table row, but nothing seem to work 🙁

Read More

I have tested the following 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 is my HTML code 

<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 anyone give me a push in the right direction?

UPDATE

I’m not using jQuery to highlight table rows any more, but CSS.

This is for list elements, but I’m guessing this will work for table rows as well:

li:nth-child(odd) { background-color: #f3f3f3; }

Post Views: 5

Related posts

Leave a Reply

7 comments

  3. Is the alert message actually popping up when you test?

    If so, it’s possible the problem is with your CSS. It took me a long time to realise that most styles applied to a tr tag don’t have any effect. So, in general, you need to apply styles to each td in the row

    .highlight td {highlighted appearance}

    rather than

    .highlight {highlighted appearance}

  4. +1 wheresrhys. Using a background rule on .highlight td made your ‘TEST 2’ work fine for me.

    ‘TEST 1’ won’t, because of the unnecessary parents() call.

  5. Once, I found this solution – works perfectly – just add!
    Unfortunately, I do not know the author 🙁

    <script type="text/javascript">

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

    </script>

  7. Of course, the solution of Julian with simple CSS is to be preferred. If you want to do it dynamically in javascript, you could do it like this

    $('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');});
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');});

    If you have more divs per row, you could specify the div to be highlighted by giving each row class=”row” and putting ‘div.row’ as the 2nd argument of on().