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

Question

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

    
        
            Blah Blah
           


        

Answer 1

You can add the button role to a table row and Bootstrap will change the cursor without any css changes. I decided to use that role as a way to easily make any row clickable with very little code.

Html

     

          

               
Cell 1
               
Cell 2
               
Cell 3
          
     

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

You can apply this same principle to add the button role to any tag.