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>
Please look at other answers below, especially ones that do not use jquery.
Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)
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.
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).
Since this was posted window.document.location
is obsolete (or deprecated at the very least) use window.location
instead.