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