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

<%@ Page language="VB" Debug="true" Strict="true" codebehind="tables.aspx.vb" src="tables.aspx.vb" inherits="Table" %>
	<title>Highlighting rows in a table</title> </head>
<form id="myForm" method="post" runat="server">
	<asp:Table runat="server" id="myTable" cellpadding="3" cellspacing="1" border="0">
		<asp:TableRow BackColor="#c9c9c9">
				<input name="cbxSelectAll" type="checkbox" onclick="javascript:checkAll(this.form);">
			<asp:TableCell Text="Output" />

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

Option Explicit On
Option Strict On

Imports System
Imports System.Web.UI.WebControls
Imports System.Drawing

Public Class Table

	Inherits System.Web.UI.Page

	Protected myTable As System.Web.UI.WebControls.Table

	Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
	End Sub

	Protected Sub PopulateTable()
		'dimension new web controls
		Dim rowItem As TableRow
		Dim cellCheckbox As TableCell
		Dim checkItem As CheckBox
		Dim cellWhatever As TableCell
		Dim lblItem As Label
		Dim i As Integer
		'write as many rows as you need (15 in this case)
		For i = 1 To 15
			'define new web controls
			rowItem = New TableRow
			cellCheckbox = New TableCell
			checkItem = New Checkbox
			'check cell
			checkItem.Attributes("onClick") = "javascript:colorRow(this);"
			'add the cells to the new row
			'add more cells as needed
			'for the From, Subject, Date and Size cells
			'define new web controls
			cellWhatever = New TableCell
			lblItem = New Label
			'label cell
			lblItem.Text = "This is the output from line " + i.ToString()
			'add the cells to the new row
			rowItem.BackColor = Color.FromName("#eeeeee")
	End Sub

End Class

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:

<form name="myForm" method="post" action="tables.aspx" id="myForm">
	<table id="myTable" cellspacing="1" cellpadding="3" border="0" border="0">
		<tr style="background-color:#C9C9C9;">
				<input name="cbxSelectAll" type="checkbox" onclick="javascript:checkAll(this.form);">
		<tr style="background-color:#eeeeee;">
				<span onClick="javascript:colorRow(this);">
					<input id="_ctl0" type="checkbox" name="_ctl0" />
				<span>This is the output from line 1</span>

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.

<script type="text/javascript"><em>
//declare global variables</em>
var rowsSelected = 0;<em>
//change the background color of a row when selected and</em><em>
//also count how many rows are selected</em>
function colorRow(srcElement) {
	var cb = event.srcElement;
	var curElement = cb;
	while (curElement && !(curElement.tagName == "TR")) {
		curElement = curElement.parentElement;
	if (!(curElement == cb) && ( != "cbxSelectAll")) {
		if (cb.checked) { = "gold";
			rowsSelected = rowsSelected + 1;
		else { = "#eeeeee";
			rowsSelected = rowsSelected - 1;


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.

//color all rows when the main checkbox is clicked</em>
function checkAll(form) {
	var thisNumRowsSelected = 0;
	var isChecked = document.all.cbxSelectAll.checked;
	for (var i=0; i < form.elements.length; i++) {
		if (form.elements[i].name.indexOf('_ctl') > -1) {
			var curElement = form.elements[i];
			if (isChecked) {
				curElement.checked = true;
				thisNumRowsSelected = thisNumRowsSelected + 1;
				while (!(curElement.tagName == "TR")) {
					curElement = curElement.parentElement;
				if (form.elements[i].name != "cbxSelectAll") { = "gold";
			else {
				curElement.checked = false;
				while (!(curElement.tagName == "TR")) {
					curElement = curElement.parentElement;
				if (form.elements[i].name != "cbxSelectAll") { = "#eeeeee";
	rowsSelected = thisNumRowsSelected;

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.

2 Responses to Creating clickable table rows in ASP.NET that change colors

  • M.Smit


    I’ve got a question about this code, i can’t get the CheckAll checkbox to work. When I select it or deselect it, nothing happens.

    I’ve used it on IIS7 with IE9.

    Do you have any idea why it doesn’t work? The rest of the script works fine and does exactly what I need, thanks!

    Kind regards

  • srilekha


    As Smit said the code is good but checkall button was not working. Can you please help me out.