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

i'm using bootstrap , following doesn't work:

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

you using bootstrap means using jquery :^), 1 way 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 don't have use href or switch locations, can whatever in click handler function. read on jquery , how write handlers;

advantage of using class on id can apply solution 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 code base doesn't change. same handler take care of rows.

another option

you can use bootstrap jquery callbacks (in document.ready callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {     window.location = $element.data('href'); }); 

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

---

note

since posted window.document.location obsolete (or deprecated @ least) use window.location instead.