Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the most standard and compatible way to make a whole table row into a link?

Obviously you can't just surround the <tr> tag with an <a> tag and call it a day; this is invalid and doesn't even work. I have seen JavaScript used, but then what happens to browsers that don't support JavaScript? What is the best way to make an entire table row <tr> into a link?

Edit: At the request of Lerxst, here is an example of a table with some rows:

<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>
like image 571
Ricket Avatar asked May 20 '10 17:05

Ricket


People also ask

How do you make a whole row in a table clickable as a link?

To make the entire row as clickable in this case, one can use a link <a> tag to wrap its content.

How do you link a row to a table in HTML?

Add class . rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a. mainlink" A cell can be excluded by adding the .

Which tag is used to create a row in a table?

<tr>: The Table Row element. The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.


1 Answers

My preference would be to put a link in the most logical cell for it (probably the name), then add an event handler along the lines of:

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

Non-JS clients would still be able to use the regular link.

More efficiently, attach the event handler to the table and use the event object to find the element with the click and then climb up the tree of parents until it hit a row. This is probably best achieved with a library such as YUI or jQuery.

like image 55
Quentin Avatar answered Oct 19 '22 13:10

Quentin