Creating clickable table rows in ASP.NET that change colors

February 9, 2011|ASP.NET2

In services like Hotmail, you have a list of contents in a table. If you allow the user to select rows and do something with them, you might want to make it more pleasing to the eye, by changing the color of the row when selected. You might also have a main control checkbox, that when clicked selects all the rows and also colors all the rows. In this article, we’ll see how to accomplish that in 2 parts: first how to create programatically the table and controls populating the checkboxes, and second we’ll create the Javascript functions that handle the client effect of changing colors.

This is a snapshot taken from my hotmail account. Each row contains a checkbox, and when clicked the whole row changes colors. You can also see next to the From heading the main checkbox, which when clicked selects and highlights all rows.

Creating the table programatically

First create a table in a web form nested inside a form – tables.aspx

The web form is a simple page with one form and one table that run at the server side. I included the headers row already, in order to show how to create rows using both html controls and web controls.

Then create some code in the codebehind page that will populate the table with rows – tables.aspx.vb

The codebehind page has one class, Table, which inherits from the System.Web.UI.Page class. It contains 2 methods: the Page_Load() and a custom one called PopulateTable(), which is called when the page is loaded. We can use a simple loop in the sub to create 15 rows. The first cell of each row is the Checkbox, and we add the Javascript call as an attribute. The second cell contains a Label web control just so we can show the highlight effect later on.

Creating the Javascript functions

The resulting HTML output from the above code looks something like this:

A closer look at the HTML code produced above, reveals that the Javascript function colorRow(this) is wrapped around each checkbox in a tag, and not in the checkbox tag itself.  This is the result of adding an attribute programatically to a checkbox web control. The .NET parser gives each generated checkbox a generic ID and Name, starting with _ctl and followed by a number.  This is a little trickier to handle than simply having the function in the checkbox tag itself, but nothing that can’t be solved. Let’s take a look at this Javascript function.

We capture the event that fired the Javascript, namely the span, and use Javascript’s parentElement to travel upwards in the DOM hierarchy until it finds a <tr> tag. The first one we find must be the row in question, so we capture it and then change its color. The color we change it to, depends on whether we are checking the row or un-checking it. We must also make sure to exclude the main checkbox (cbxSelectAll) from the ones that can change colors: otherwise, even the title headers would change colors once we click on the checkbox to automatically select all the checkboxes. A global variable rowsSelected counts how many rows have been clicked. This is useful if for example you have a Delete function, which deletes the rows you have selected – you can fire the server event only if the rowsSelected is greater than 0, otherwise you can pop up an alert message to the user. Let’s now take a look at the function which selects all the checkboxes.

This function does basically the same one as the colorRow(), except that it excludes the cbxSelectAll checkbox row from being highlighted. The internal variable thisNumRowsSelected counts the total number of rows selected, and sets it equal to the global rowsSelected variable at the end of the function. Our 2 Javascript functions are now complete, and we can add them to our web form – tables.aspx.

In this article we have learned how to populate a table with rows and cells containing checkboxes programatically, and how to change the color of the rows on clicking each checkbox. The Javascript code has been tested with IE6.0 and it should work with DOM-compliant browsers. One possible improvement I can think of, is to allow for many different colors of rows, and return back to the original color on un-checking each checkbox.