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

Author's note I:

Please look at other answers below, especially ones that do not use jquery.

Author's note II:

Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)

Original 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.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;

Advantage of using a class over id is that 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 handler would take care of all the rows.

Another option

You can use 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).

---

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

Answer 2

You can't do that. It is invalid HTML. You can't put a <a> in between a <tbody> and a <tr>. Try this instead:

<tr onclick="window.location='#';">    ... </tr> 

add style for pointer view

[data-href] { cursor: pointer; } 

When you work up to it, you'd want to use JavaScript to assign the click handler outside the HTML.