html - table row like a link

After reading this thread and some others I came up with the following solution in javascript:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">. And make sure the script above is executed after the tr element is created (by its placement or using event handlers).

The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.

You can style specifically the link TRs with "tr[href]" CSS selector.

Thanks for this. You can change the hover icon by assigning a CSS class to the row like:

<tr class="pointer" onclick="document.location = 'links.html';">

and the CSS looks like:

<style>
    .pointer { cursor: pointer; }
</style>

This method is here to give you a choice. Old css trick: filling the parent with position absolute.

<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>

• inset:0 is a shorthand for top:0;right:0;bottom:0;left:0

• we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.