Yesterday some one asked me how to hightlight a row in repeater using jQuery, so I decided to share the following code with you. In this example, you will see that when you will move mouse over the table row, background color will chang as where you will place the cursor sepecfic row will hightlight.
Here is an example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Highlight a row in ASP.NET Repeater using jQuery | aspxtutorial.com </title>
<style>
#table1
{
width: 500px;
font-size: .80em;
font-family: "Helvetica Neue", Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #666;
}
#table1 th
{
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 29px;
text-align: left;
padding-left: 10px;
background-color: #fafafa;
}
#table1 td
{
border-bottom: 1px solid #eee;
padding-left: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#table1 tr").hover(function () {
$(this).css("background-color", "#eaeaea");
}, function () {
$(this).css("background-color", "#fff");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
<h1>
Highlight a row in ASP.NET Repeater using jQuery
</h1>
</p>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="table1">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# ((Book)Container.DataItem).Title %>
</td>
<td>
<%# ((Book)Container.DataItem).Author %>
</td>
<td>
<%# ((Book)Container.DataItem).Price %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
<tfoot>
<tr>
<th colspan="3">
 
</th>
<th>
<div id="total">
</div>
</th>
</tr>
</tfoot>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Output
Download
Repeater-jQuery-Highlight-row.zip (1.77 kb)
See live demo