How to make an ASP.NET Table row highlight and become clickable

For those people who like to output their data to an asp:Table, highlighting the entire row and making it clickable can make it obvious to the user that some action is expected from them. This emulates the behaviour that can be found in some desktop applications. All that's needed for this is a bit of javascript, and the use of AddAttributes() for the table rows.

You will also need to get round the limitation of the fact that the <a> tag is not allowed around a table row, so here are the two javascript functions that perform the magic:

    
function highlight(tableRow, active)
{
if (active)
{
tableRow.style.backgroundColor = '#cfc';
}
else
{
tableRow.style.backgroundColor = '#fff';
}
}

function link(Url)
{
document.location.href = Url;
}

And here's the method that adds the javascript to each row of the table as it is rendered:

string connstring = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";
connstring += Server.MapPath("App_Data/NWind.mdb");
string query = "SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City]";
query += " FROM [Customers]";
OleDbConnection conn = new OleDbConnection(connstring);
OleDbDataAdapter da = new OleDbDataAdapter(query, conn);
DataSet ds = new DataSet();
da.Fill(ds, "Employees");
foreach (DataRow dr in ds.Tables[0].Rows)
  {
    TableRow trow = new TableRow();
    foreach (DataColumn dc in ds.Tables[0].Columns)
    {
      TableCell tcell = new TableCell();
      tcell.Controls.Add(new LiteralControl(dr[dc.ColumnName].ToString()));
      trow.Cells.Add(tcell);
  
      trow.Attributes["onmouseover"] = "highlight(this, true);";
      trow.Attributes["onmouseout"] = "highlight(this, false);";
      trow.Attributes["onclick"] = "link('edit.aspx?id=" + dr[0].ToString() + "');";
      HttpResponse myHttpResponse = Response;
      HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
      trow.Attributes.AddAttributes(myHtmlTextWriter);
      Table1.Rows.Add(trow); 
    }
  }
conn.Close();

Date Posted:
Last Updated:
Posted by:
Total Views to date: 82193

4 Comments

- James Piette

I recently implemented similar functionality on a site I'm building using ASP MVC. I was able to do this using CSS and jquery. I also was using an AJAX call to have a table in a left division post the data to the rightDiv (division with id="divRight".

After including jquery, put this script on the top of the page.
<script type="text/javascript">
function linkfunc(url) {
$(divRight).load(url);
}

Then declare the <tr> tag as follows. (replace the stuff in [] to match your controller call.)
tr class="highlight" onclick="linkfunc('<%= Url.Action("[controlleraction]", "[controllername]", new{/*id=model.id*/})%>');">

To have highlighting work, declare this in the .css file
.highlight:hover
{
background-color:yellow
}

- Mike

@James

Since I wrote this article over 3 years ago, I have been using jQuery too.

- Mindaugas Matulis

There is a much easier way to do this without javascript. Just when you create Table Row items you can simply change colore on attribute name like in previous example:

trow.Attributes["onmouseover"] = "this.bgColor = '#DCEAF3'";
trow.Attributes["onmouseout"] = "this.bgColor = '#FFFFFF'";

- Mike

@Mindaugas Matulis

Thanks, but you are still using Javascript.

This article is very old. I'd recommend managing this via jQuery or similar these days anyway.
Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and I end up deleting quite a lot. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Requests to fix your code (post a question to forums.asp.net instead, please)
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Recent Comments

faysal 3/3/2015 11:46 AM
In response to Inline Editing With The WebGrid
Nice one can you please tell us how we can do ad and delete functionality in this. for e.g if i on...

Fairoze Mohamed Musthafa 3/2/2015 8:33 AM
In response to Date formatting in VBScript
Appreciated !!!!...

mahdi 3/1/2015 10:16 AM
In response to Getting the identity of the most recently added record
Great Article....

Sohrab 2/28/2015 12:53 PM
In response to Displaying One-To-Many Relationships with Nested Repeaters
hi.this was very usefull for me.after spending 6 hours I could find best answer for my alot....

Abolfazl RoshanZamir 2/28/2015 10:36 AM
In response to Date Formatting in C#
very informative... thanks for sharing sir......

Oscar Duran 2/27/2015 2:00 PM
In response to How To Check If A Query Returns Data In ASP.NET Web Pages
Thank you very much Mike, this post has been very useful to me....

lama 2/27/2015 1:46 PM
In response to iTextSharp - Working with Fonts
thanks alot!! is it possible to add line height value to a paragraph ?...

Oded Dror 2/27/2015 5:23 AM
In response to MVC 5 with EF 6 in Visual Basic - Creating an Entity Framework Data Model
Hi there, Where I can find Contoso University Database? Thanks, Oded Dror...

hosein ey 2/25/2015 1:56 PM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
tnx for this article do you think next version of entityframework support's the sql server and ?...

Saywer Ford 2/25/2015 5:15 AM
In response to Optimising ASP.NET Web Pages Sites - Bundling And Minification
Great Article. I did everything right and working fine. How about page specific js files. Lets I...