jQuery Tip: Highlight row on hover
This snippet applies a class when you hover over a table row and removes it when you move the mouse out. Useful when you have a table with many rows and want to improve readability. Define your stylesheet in head : <style type="text/css"> <!-- #mytable { border-collapse: collapse; width: 300px; } #mytable th, #mytable td { border: 1px solid #000; padding: 3px; } #mytable tr.highlight { background-color: #eee; } //--> </style> JavaScript (also in head ) <script type="text/javascript"> <!-- $( function() { $("#mytable tr").hover( function() { $(this).addClass("highlight"); }, function() { $(this).removeClass("highlight"); } ) } ) //--> </script> Your table (with id mytable ) in body <table id="mytable"> <tr> <th>Foo</th> <td>Lorem</td> <td>Ipsum</td> </tr> <tr> <th...