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>
To make the entire row as clickable in this case, one can use a link <a> tag to wrap its content.
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 .
<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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With