How to add hyperlink to table row <tr>

Question

I am having a table with its table row <tr> generating in a loop to form multiple rows.

I want to give separate <a> link to each <tr>. Since in table we can add only add data to <td> only, I am not able to achieve that.

Is there any other way to achieve this?

Answer 1

Html:

<table>
    <tr href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr href="http://apple.com">
      <td>Apple</td>
    </tr>
    <tr href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JavaScript using jQuery Library:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

You can try this here: http://jsbin.com/ikada3

CSS (optional):

table tr {
    cursor: pointer;
}

OR the HTML valid version with data-href instead of href:

<table>
    <tr data-href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr data-href="http://apple.com">
      <td>Apple</td>
    </tr>
    <tr data-href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JS:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

CSS:

table tr[data-href] {
    cursor: pointer;
}

Answer 2

Playing off of @ahmet2016 and keeping it W3C standard.

HTML:

<tr data-href='LINK GOES HERE'>
    <td>HappyDays.com</td>
</tr>

CSS:

*[data-href] {
    cursor: pointer;
}

jQuery:

$(function(){       
    $('*[data-href]').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

Answer 3

The easiest way I've found to turn a table row into a link is to use the onclick attribute with window.location.

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>