In this article, I will show how to highlight table row
on mouse hover event with JQuery.
If you are complete new to JQuery, Then refer the JQuery Quick Start
This gives you basic understanding of JQuery.
JQuery hover() is a function expect two arguments,
Syntax is,
selector.hover( over, out );
Here,
selector is some id of the form.
over is a function that calls when mouse entered the matched element.
out is a function that calls when mouse leaves the matched element.
In my example, to highlight a mouse hover row
change the color to red.
Here I required two functions one is for mouse over event
and another is for mouse leaves event.
selector is the all tr of the table.
$("tr").not(':first')
.hover(
function () {
$(this).css("background","red");
},
function () {
$(this).css("background","");
}
);
Here,
selector is $(“tr”)
mouse over event function is,
function () {
$(this).css("background","red");
}
mouse out function is,
function () {
$(this).css("background","");
}
.not(‘:first’) indicate not consider table header for this
mouse hover or out events.
Complete source code is Here,
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>JQuery: Highlight table row record on hover</h1>
<table border="1">
<tr>
<th>Row No</th>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
<th>Address</th>
<th>PhoneNumber</th>
</tr>
<tr>
<td>1</td>
<td>David</td>
<td>Ronald</td>
<td>24</td>
<td>21 2nd Street, New York</td>
<td>212 555-1234</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>John</td>
<td>44</td>
<td>18 3nd Street, Australia</td>
<td>321 432-3213</td>
</tr>
<tr>
<td>3</td>
<td>David</td>
<td>Ronald</td>
<td>24</td>
<td>21 2nd Street, New York</td>
<td>212 555-1234</td>
</tr>
<tr>
<td>4</td>
<td>Peter</td>
<td>Saharan</td>
<td>64</td>
<td>45 5nd Street, Oakland</td>
<td>124 434-3213</td>
</tr>
<tr>
<td>5</td>
<td>James</td>
<td>Kannan</td>
<td>27</td>
<td>9 1nd Street, Australia</td>
<td>432 432-9474</td>
</tr>
</table>
<script type="text/javascript">
$("tr").not(':first').hover(
function () {
$(this).css("background","red");
},
function () {
$(this).css("background","");
}
);
</script>
</body>
</html>
You can Try it your self by clicking the given link,
*** Venkat – Happy leaning ****