Home/ Questions/Q 186563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T15:40:08+00:00

I need to highlight a table row on mouse over. Seems like an easy

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0