DotNetStories
Highlighting rows and columns in an HTML table using JQuery
A friend of mine was seeking some help regarding HTML tables and JQuery. I have decided to write a few posts demonstrating the various techniques I used with JQuery to achieve the desired functionality.
Τhere are other posts in my blog regarding JQuery.You can find them all here.
We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions.
1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application.
2) Add a web form, default.aspx page to the application.
3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page
4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.
5) We will add a stylesheet to the application (Style.css)
6) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section Ι add the following lines.
<link href="Style.css" rel="stylesheet" type="text/css" /> <script src="jquery-1_8_2_min.js" type="text/javascript"></script>
7) Now we need to highlight the rows when the user hovers over them.
8) First we need to type the HTML markup
<body>
<form id="form1" runat="server">
<div>
<h1>Liverpool Legends</h1>
<table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10">
<thead>
<tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>
</thead>
<tbody>
<tr>
<td>Alan Hansen</td>
<td>Graeme Souness</td>
<td>Ian Rush</td>
</tr>
<tr>
<td>Alan Kennedy</td>
<td>Steven Gerrard</td>
<td>Michael Owen</td>
</tr>
<tr>
<td>Jamie Garragher</td>
<td>Kenny Dalglish</td>
<td>Robbie Fowler</td>
</tr>
<tr>
<td>Rob Jones</td>
<td>Xabi Alonso</td>
<td>Dirk Kuyt</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
9) Now we need to write the simple rules in the style.css file.
body
{
background-color:#eaeaea;
}
.hover {
background-color:#42709b; color:#ff6a00;
}
10) Inside the head section we also write the simple JQuery code.
<script type="text/javascript">
$(document).ready(function() {
$('tr').hover(
function() {
$(this).find('td').addClass('hover');
},
function() {
$(this).find('td').removeClass('hover');
}
);
});
</script>
11) Run your application and see the row changing background color and text color every time the user hovers over it.
Let me explain how this functionality is achieved.We have the .hover style rule in the style.css file that contains some properties that define the background color value and the color value when the mouse will be hovered on the row.In the JQuery code we do attach the hover() event to the tr elements.The function that is called when the hovering takes place, we search for the td element and through the addClass function we apply the styles defined in the .hover class rule in the style.css file.I remove the .hover rule styles with the removeClass function.
Now let's say that we want to highlight only alternate rows of the table.We need to add another rule in the style.css
.alternate {
background-color:#42709b; color:#ff6a00;
}
The JQuery code (comment out the previous JQuery code) follows
<script type="text/javascript">
$(document).ready(function() {
$('table tr:odd').addClass('alternate');
});
</script>
When I run my application through VS I see the following result
You can do that with columns as well. You can highlight alternate columns as well.
The JQuery code (comment out the previous JQuery code) follows
<script type="text/javascript">
$(document).ready(function() {
$('td:nth-child(odd)').addClass('alternate');
});
</script>
In this script I use the nth-child() method in the JQuery code.This method retrieves all the elements that are nth children of their parent.
Have a look at the picture below to see the results
You can also change color to each individual cell when hovered on.
The JQuery code (comment out the previous JQuery code) follows
<script type="text/javascript">
$(document).ready(function() {
$('td').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
});
</script>
Have a look at the picture below to see the results.
Hope it helps!!!