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: 84211

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.

Recent Comments

KrASh 5/19/2015 11:10 PM
In response to Adding Search
Hello Mike, I have a question about the second search. In one line it has a where with the title and...

KrASh 5/19/2015 11:04 PM
In response to Accessing Your Model's Data from a Controller
Thanks, I had some silly mistake, can't remember now what it was (had some personal problems last i...

Satyabrata Mohapatra 5/18/2015 4:29 PM
In response to Error Handling in ASP.NET Razor Web Pages
Great article. Learned a lot....

Corstian Boerman 5/13/2015 12:59 PM
In response to ASP.NET 5 Middleware, Or Where Has My HttpModule Gone?
It looks as if this technique doesn't work anymore. (As of the VS 2015 RC release) When adding it...

Alvin 5/12/2015 1:20 PM
In response to Razor Web Pages E-Commerce - Adding A Shopping Cart To The Bakery Template Site
Maybe ability to update quantity of the items once you are in the "Review Cart" step. Also, if on...

Rakesh Panchal 5/12/2015 5:02 AM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
this is v v good web site for help...

Mariusz 5/11/2015 7:19 PM
In response to Introducing TagHelpers in ASP.NET MVC 6
In your comparison of old Html.RouteLink and new AnchorTagHelper where we can specify "title" and in...

Andrea 5/11/2015 3:40 PM
In response to Save And Retrieve Files From a Sql Server CE Database with WebMatrix
Please excuse my noob question. I am using your tips to add file upload to a form I have created. a...

Luis 5/10/2015 5:26 PM
In response to Accessing Your Model's Data from a Controller
Ok. I got it! Return RedirectToAction("Create") on the controller :-) thanks...

Luis 5/10/2015 4:08 PM
In response to Accessing Your Model's Data from a Controller
Hi. Great tutorial. I'm starting to learn MVC. What can I do for when the Create Button is it...