Bootstrap make table row clickable
Bootstrap make table row clickable : Sometimes we need to make the table row clickable same a hyperlink works. We can make the whole table row clickable same as hyperlink using the jQuery. Here in this tutorial we are going to explain how you can make table row clickable with complete example and demo.
Bootstrap make table row clickable
You can make whole row clickable simply using the jQuery as below. In this tutorial we have made the table row to behave like anchor tag ie. link.
Html Part
Bootstrap make table row clickable : Example
<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> |
JavaScript Part
Bootstrap make table row a link using the following jQuery-
Bootstrap make table row clickable : jQuery Example
<script type="text/javascript"> $(document).ready(function($) { $(".table-row").click(function() { window.document.location = $(this).data("href"); }); }); </script> |
If you run the above example it will produce the following output. Table rows are clickable which will work as link .
Advertisements