How to Make Bootstrap Table Rows Clickable

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

Author's note I:

Please look at other answers below, especially ones that do not use jquery.

Author's note II:

Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)

Original Answer

You are using Bootstrap which means you are using jQuery :^), so one way to do it 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 you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

Advantage of using a class over id is that you can apply the solution to 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 your code base doesn't change. The same handler would take care of all the rows.

Another option

You can use Bootstrap jQuery callbacks like this (in a document.ready callback):

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

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

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

How do I make bootstrap table rows clickable?

Using jQuery it's quite trivial. v2.0 uses the table class on all tables.

$('.table > tbody > tr').click(function() {
    // row was clicked
});

How to make tr clickable as a link instead of cell?

Try this (without JS):

        <tr>        <td style="text-decoration: underline; font-size: 15px;"></td>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">               1<?php echo $row['district']; ?>            </div>          </a>        </td>                <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              2<?php echo $row['program']; ?></td>            </div>          </a>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              3<?php echo $row['gender']; ?>            </div>          </a>        </td>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              4<?php echo $row['yoa']; ?>            </div>          </a>        </td>        <td>          <a href="http://google.com">            <div style="height:100%;width:100%">              5<?php echo $row['email']; ?>            </div>          </a>        </td>

Bootstrap table row clickable with buttons in row

I added the row-click class to the cells(td's) and excluded the last cell where the buttons are. Now everything works fine. No need for stopPropagation(). I removed row-link class from row and added it to the necessary cells and I've rebuild the JS to:

$('.table td.row-link').each(function(){
    $(this).css('cursor','pointer').hover(
        function(){ 
            $(this).parent().addClass('active'); 
        },  
        function(){ 
            $(this).parent().removeClass('active'); 
        }).click( function(){ 
            document.location = $(this).parent().attr('data-href'); 
        }
    );
});

Using Bootstrap modal with HTML clickable-row in table which is populated by foreach to return clicked row content

You need create a jQuery code like this:

<script>
    // When the modal is show
    $('#editModal').on('show.bs.modal', function (event) {
        var target = $(event.relatedTarget);

        // Get the order_id from the attribute
        var order_id = target.data('order-id');

        var modal = $(this);

        // Find the input from modal and put a value in it
        modal.find('input[name=dateRenewalDue]').val(order_id);
    })
</script>

In order to get order_id from our jQuery code. We need to add a data attribute on our tr tag

<tr class='clickable-row' data-toggle="modal" data-target="#editModal" data-order-id ="<?php echo $orderbook_info['order_id']; ?>" style="cursor:pointer">

Since we already add data-order-id into our tr tag. From jQuery we are able to get order id upon the modal is trigger

Bootstrap modal docs

How to make a Column data clickable one in React table?

the columns data add like below:

{
  dataField : "report",
  text : "Show report",,
  formatter: (cell, row) => <a href={cell}> {cell} </a>
}