Making a Table Row clickable

Question

I wonder what the best way to make an entire tr clickable would be?

The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).

While that works, it is a pity that the target URL is not visible in the status bar of a browser, unlike normal links.

So I just wonder if there is any room for optimization? Is it possible to display the URL that will be navigated to in the status bar of the browser? Or is there even a non-JavaScript way to make a tr clickable?

Answer 1

Fortunately or unfortunately, most modern browsers do not let you control the status bar anymore (it was possible and popular back in the day) because of fraudulent intentions.

Your better bet would be a title attribute or a javascript tooltip.

Answer 2

I had that same problem, I solved it by using CSS only. I think it was the best solution for me, because I was using it in JSF also.

Just assign the style class to the table and you are good to go....

Here it goes:

CSS:

.myDataTable {
    background: 444;
    width: 100%;
}

.myDataTable thead tr {
    background-image: url('../img/tableHeader.jpg');
}

.myDataTable thead tr th {
    height: 28px;
    font-size: 14px;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable thead tr th img {
    padding-right: 5px;
    padding-top: 1px;
}

.myDataTable thead tr td {
    height: 15px;
    font-size: 11px;
    font-weight: bold;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable tbody {
    background: #f2f5f9;
}

.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
    background: #e2ebf4;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
    background: #f7faff;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:hover td {
    background-color: #e7e7e7;
}

.myDataTable tbody tr td {
    height: 14px;
    padding-left: 5px;
    font-size: 12px;
}

.myDataTable tbody tr td a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: block;
}

.myDataTable thead tr th a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: inline;
}

Your table structure should be:

<table class="myDataTable">
 <thead>
  <tr>
   <th>Heading 1</th>
   <th>Heading 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="#">Data    1 </a></td>
   <td><a href="#">Data    2 </a></td>
  </tr>
 </tbody>
</table>

Answer 3

Another approach is to actually linkify the contents of each cell. You could change the style if necessary so they don't look like traditional links.

Note that what you are trying to do does break the intuitive user experience a little bit. It needs to be clear that clicking on a row does something. I usually prefer to put an icon at the edge of each row (a magnifying glass, etc.) which drills into a new page.

Answer 4

It's a hack but you can add this to your tr:

onmouseover="window.status='http://bla.com/bla.htm'" 

don't forget to style your fake links:

tr.clickable {
    cursor: hand; 
    cursor: pointer;
}

Answer 5

Marko Dugonjic, in his blog maratz.com, explained how you detect a table row index with Javascript. In his example, when you mouse over any cell in a row, the entire row is highlighted.

See example, http://webdesign.maratz.com/lab/row_index/

and his article, http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/

With a change, you can adapt this further by placing an onclick action.

Answer 6

You might also try wrapping the content of your row's cells in an href and using CSS to push the href height/width to the internal bounds of each cell. The row itself wouldn't be clickable (unless you added additional html to the row) but most of the content space of the row would act like a normal link (cursor, status bar, etc). I can't remember off hand exactly how I did this before but I was reasonably successful getting this to work.

Edit: A comment asked for more details and they were covered by a later post from another user but I didn't realize that until I looked further into this suggestion and tested it.

If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar. This is all done with zero javascript. Good luck.