How to add hyperlink to table row <tr> ?

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


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



There is a way to achieve it which is following.


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 view this here: http://jsbin.com/ikada3/88
To get source right click on webpage and view source code.

Plese Feel Free to Socializer This Post

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →