user1038814 user1038814 - 6 months ago 99
HTML Question

how to make a whole row in a table clickable as a link?

is it possible to make a whole row clickable as a link? I'm using bootstrap andthe following doesn't work:

<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>

Answer

You are using Bootstrap which means you are using jQuery :^) so one way to do it is:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

addendum

The reason for using a class rather than using an id is because you can apply the solution to multiple rows:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td>
        <td>1234567</td>
        <td>£800,000</td>
    </tr>
</tbody>

and your code base doesn't change. The same function would take care of both rows. i.e. you are still using this:

jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});