CODEWITHSUNDEEP
jquerywordpress
Steven
Steven

Reputation: 19455

jQuery highlight table row

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 :-(

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:[email protected]">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:[email protected]">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:[email protected]">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:[email protected]">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; }

Upvotes: 5

Views: 26097

Answers (7)

zevero
zevero

Reputation: 2412

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().

Upvotes: 0

BalaKrishnan웃
BalaKrishnan웃

Reputation: 4557

Take a look at this How to highlight rows in a table on mouse hover?

Upvotes: 0

Andrzej W
Andrzej W

Reputation: 11

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>

Upvotes: 1

Julian
Julian

Reputation: 2061

If you don't need IE6 support, the highlighting can be done with some simple CSS:

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

Upvotes: 33

AlteredConcept
AlteredConcept

Reputation: 2632

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

Here's how you use it.

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

Take care

Upvotes: 9

bobince
bobince

Reputation: 536775

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

Upvotes: 1

wheresrhys
wheresrhys

Reputation: 23570

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}

Upvotes: 5

Related Questions