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

Question

I'm using Bootstrap and the following doesn't work:

<tbody>

    <a href="#">

        <tr>

            <td>Blah Blah</td>

            <td>1234567</td>

            <td>£158,000</td>

        </tr>

    </a>

</tbody>

Answer 1

If you are using Bootstrap then you must be using jQuery :^), so use this code:

<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.location = $(this).data("href");

    });

});

Note: You don't have to use href or switch locations, you can do whatever you like in the click handler function.

You can apply the solution to multiple rows, If you are using a class over id:

<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>

Or else, You can try using Bootstrap jQuery callbacks like this (in a document.ready callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {

    window.location = $element.data('href');

});

This has the advantage of not being reset upon table sorting (which happens with the other option).