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>

Try it »

If you run the above example it will produce the following output. Table rows are clickable which will work as link .

Bootstrap make table row clickable : jQuery Example


Advertisements

Add Comment

📖 Read More