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

  • RPGLE %time() cheat sheet - Current Time and Time format conversion
  • RPGLE convert date format from one to another
  • iSeries date conversion cheat sheet using RPGLE BIFs %date() %char() %dec()
  • Android capture signature using Canvas and save in png format
  • RPGLE convert date to numeric or character - Use %date(), %Char(), %dec()
  • Java Multithreaded Socket server example code
  • Android Read Write EXCEL file using Apache POI
  • Android LayoutInflater - Dynamically Add and Remove Views using Java code
  • Generate large EXCEL in java using Apache POI SXSSF implementation and avoid java.lang.OutOfMemoryError
  • Android programmatically add views - Button, TextView, EditText, RadioButton, CheckBox, ToggleButton

Site Information ...

  • Terms and Conditions
  • Privacy Policy
  • Comments Policy

Tag » Add Background Color To Tr Jquery