How Do I Make a Full Table Row Clickable?
It's a common scenario to display an HTML table with items, like products, employees and so on, and then link each item to a detail page where you can display the full details of this item.
The link is often represented by a button or text link in one of the columns. But to make it easier for your users to select a specific item, you could make the full row clickable. With a bit of JavaScript, this is pretty easy to do.
Often when people try to implement this behavior, they try to add an HTML link to each table cell, like this:
<table>
<tr>
<td><a href="Details.asp">John</a></td>
<td><a href="Details.asp">Doe</a></td>
</tr>
</table>
The disadvantage of this method is that not the entire table cell is linked, but just the text in that cell. You also need to add a lot of extra code to make each cell clickable.
To make the full row selectable, you should add the link to the <tr> instead of to individual table cells. Since you're not allowed to place an <a> tag around a table row, you'll have to think a little bit outside the box to solve this puzzle. Instead of using the <a> tag, you can implement a click handler with a JavaScript method attached to it for the table row as in the example below. To clearly communicate to the user that the entire table is clickable, I also added some code that changes the background color of the table row when the mouse hovers over it. This makes it easier to see which row is selected.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Full Row Select</title>
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.yahoo.com/');">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.microsoft.com/');">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://Imar.Spaanjaars.Com/');">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
On each <tr> element I have added the onclick attribute that calls the DoNav method. This will take the user to a new page whenever the user has clicked somewhere in the table row. To change the color of the rows when the mouse hovers over the table, I have also added the onmouseover and onmouseout attributes that call the ChangeColor method to change the background color of the table row.
You can check out a working example of this code. In the example I also added a bit of CSS to influence the borders of the table, so each row has a nice thin black border at the top and bottom side, but not between the columns on the left and right side. Look at the source of the page in the browser to see how it is done.
Where to Next?
Wonder where to go next? You can read existing comments below or you can post a
comment yourself on this article.