JQuery Change HTML Table Row Color On Hover

Home » Add Background Color To Tr Jquery » JQuery Change HTML Table Row Color On Hover

Maybe your like

jQuery change HTML Table Row Color on hover

Lets say you have an application where an user is required to click on a Table row for some type of action. It's always a good practice to change the row color on mouse hover to make it easy for the user to see which row is getting selected. Here is how to do it using jQuery hover() function.
jquery row color change on hover

Source containing the HTML table - index.html

<html> <head> <title>jQuery Table - Change Row Color on Hover</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"> </script> <script type="text/javascript" src="app.js"></script> <style type="text/css"> table { border: 1px black solid; border-collapse: collapse; } th { background-color: #8b8b83; color: white; text-align:left; padding-left: 10px; } tr { background-color: white; margin: 1px; } td { padding-left: 10px; text-align:left; } .shaded { background-color: #eeeee0; } .selected { background-color: #cdcdc1; } </style> </head> <body> <table id="myTable"> <tbody> <tr> <th>Country Code</th> <th>Country Name</th> <th>Continent</th> <th>Region</th> </tr> <tr> <td>ABW</td> <td>Aruba</td> <td>North America</td> <td>Caribbean</td> </tr> <tr> <td>AFG</td> <td>Afghanistan</td> <td>Asia</td> <td>Southern and Central Asia</td> </tr> <tr> <td>AGO</td> <td>Angola</td> <td>Africa</td> <td>Central Africa</td> </tr> <tr> <td>AIA</td> <td>Anguilla</td> <td>North America</td> <td>Caribbean</td> </tr> <tr> <td>ALB</td> <td>Albania</td> <td>Europe</td> <td>Southern Europe</td> </tr> <tr> <td>AND</td> <td>Andorra</td> <td>Europe</td> <td>Southern Europe</td> </tr> <tr> <td>ANT</td> <td>Netherlands Antilles</td> <td>North America</td> <td>Caribbean</td> </tr> <tr> <td>ARE</td> <td>United Arab Emirates</td> <td>Asia</td> <td>Middle East</td> </tr> <tr> <td>ARG</td> <td>Argentina</td> <td>South America</td> <td>South America</td> </tr> <tr> <td>ARM</td> <td>Armenia</td> <td>Asia</td> <td>Middle East</td> </tr> </tbody> </table> </body> </html>

jQuery source for the application - app.js

$(document).ready(function() { $("table#myTable tr:nth-child(even)").addClass("shaded"); $("table#myTable tr").not(':first').hover( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); });

How does it work?

Basically it finds the Table by it's id and then if its not the first Row add the style "selected" also remove the style when the mouse moves away.

.hover( handlerIn(eventObject), handlerOut(eventObject) )

  • handlerIn(eventObject)
    • A function to execute when the mouse pointer enters the element.
  • handlerOut(eventObject)
    • A function to execute when the mouse pointer leaves the element.
Labels: HTML, jQuery

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.Comments are for users to ask questions, collaborate or improve on existing.

Newer Post Older Post Home

Search This Site ...

Happy to translate ...

Popular Posts ...

  • SQL Select statement Syntax cheat sheet and examples
  • Android DownloadManager Example
  • Setup IBM Integrated Web Application Server for i
  • iSeries date conversion cheat sheet using RPGLE BIFs %date() %char() %dec()
  • RPGLE convert date format from one to another
  • iSeries Delete IFS files based on Last Access Date or Modified Date
  • RPGLE convert date to numeric or character - Use %date(), %Char(), %dec()
  • RPGLE %time() cheat sheet - Current Time and Time format conversion
  • Android Listview Example using CursorAdapter and SQLite database
  • RPGLE date manipulation - Date difference, Add or substract days, months or years

Site Information ...

  • Terms and Conditions
  • Privacy Policy
  • Comments Policy

Tag » Add Background Color To Tr Jquery