Bootstrap make table row clickable
home
Run
screen_rotation
fullscreen
cloud_download
<html> <head> <title>Bootstrap Grid</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function($) { $(".table-row").click(function() { window.document.location = $(this).data("href"); }); }); </script> <style type="text/css"> .table-row{ cursor:pointer; } </style> </head> <body> <div class="container"> <table class='table table-bordered table-condensed table-striped table-hover'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr class="table-row"data-href="http://tutorialsplane.com"><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr class="table-row" data-href="http://tutorialsplane.com"><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr class="table-row" data-href="http://tutorialsplane.com"><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr class="table-row" data-href="http://tutorialsplane.com"><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> </div> </body> </html>
<html> <head> <title>Bootstrap Grid</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function($) { $(".table-row").click(function() { window.document.location = $(this).data("href"); }); }); </script> <style type="text/css"> .table-row{ cursor:pointer; } </style> </head> <body> <div class="container"> <table class='table table-bordered table-condensed table-striped table-hover'> <tr><th>Name</th><th>Email</th><th>Country</th></tr> <tr class="table-row"data-href="http://tutorialsplane.com"><td>Jhohn</td><td>jhone@gmail.com</td><td>USA</td></tr> <tr class="table-row" data-href="http://tutorialsplane.com"><td>Kelly</td><td>kelly@gmail.com</td><td>USA</td></tr> <tr class="table-row" data-href="http://tutorialsplane.com"><td>Kamana</td><td>kamna@gmail.com</td><td>India</td></tr> <tr class="table-row" data-href="http://tutorialsplane.com"><td>Anay</td><td>anay@gmail.com</td><td>Canada</td></tr> </table> </div> </body> </html>
Copyrights@tutorialsplane.com