Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

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.

I have received some comments from visitors of this blog that are "complaining" about the length of the blog posts. I will not write lengthy posts anymore...I mean I will try not to do so..

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

Posted: Sep 23 2012, 11:57 PM by nikolaosk | with 4 comment(s) |
Filed under: , ,

Comments

Cox said:

Hey! Quick question that's entirely off topic. Do you know how to make your site mobile friendly? My web site looks weird when browsing from my iphone4. I'm trying to find a theme or plugin

that might be able to fix this issue. If you have any recommendations, please share.

Thanks!

# September 28, 2012 8:50 AM

Bostick said:

Keep this going please, great job!

# September 28, 2012 11:53 AM

Lindberg said:

I love what you guys tend to be up too. This kind of clever work and reporting!

Keep up the good works guys I've included you guys to our blogroll.

# September 28, 2012 10:02 PM

Amador said:

I really like it whenever people come together and share

ideas. Great website, keep it up!

# September 29, 2012 3:18 AM