How do I make bootstrap table rows clickable?

Go To StackoverFlow.com

66

I can hack this myself, but I think bootstrap has this capability.

2012-04-03 23:03
by rjurney
They're already clickable. Did you want them to do something when clicked? If so, what - ceejayoz 2012-04-04 00:20


67

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

$('.table > tbody > tr').click(function() {
    // row was clicked
});
2012-04-04 00:19
by Terry
If you want to bind the click event only to the table body rows then use the '.table > tbody > tr' selector - miguelcobain 2012-06-20 15:33
How to do this with specific table? Like i have 3 tables and i want to bind on click event on one table row then how am i get to do i - Muneem Habib 2015-03-18 05:49
@MuneemHabib just add id to that table and use the id selector $('#my_id > tbody > tr')stefita 2015-05-26 23:32
Use .on('click', function(){}); instead of .clickmauricehofman 2015-10-14 17:13
@MaHo Perhaps you can qualify why - troelskn 2016-03-30 07:30
Readability and/or personal preference. Both will work as it is a shortcut for .on(click, handler). And to be honest, when i typed that comment, i thought .click was deprecated. But i got that mixed up with .live() - mauricehofman 2016-03-30 10:10


57

There is a javascript plugin that adds this feature to bootstrap.

When rowlink.js is included you can do:

<table data-link="row">
  <tr><td><a href="foo.html">Foo</a></td><td>This is Foo</td></tr>
  <tr><td><a href="bar.html">Bar</a></td><td>Bar is good</td></tr>
</table>

The table will be converted so that the whole row can be clicked instead of only the first column.

2012-07-25 10:36
by Jasny - Arnold Daniels
nice work with your fork. Please adjust the example how to use twitter-bootstrap and your bootstrap version for this question - CSchulz 2014-02-15 14:25
Include both bootstrap.css and jasny-bootstrap.css and load jasny-bootstrap.js. For the use of rowlink see http://jasny.github.io/bootstrap/javascript/#rowlin - Jasny - Arnold Daniels 2014-02-16 01:00
It seems that the accepted answer is simpler since most projects already use jQuery. Why double the upvotes here. No offense, just trying to understand why is this solution better - user 2014-03-15 09:21
@buffer The small plugin also handles triggering the click of the link and styling the row to make it clear it works as a link. Sure, it's a trivial thing which a lot of developers could easily create themselves. The same could be said for Bootstrap's Collapse and Button plugins - Jasny - Arnold Daniels 2014-03-16 20:33
@Jasny-ArnoldDaniels - your example on http://jasny.github.io/bootstrap/javascript/#rowlink only has first column clickable using Chrome ... doesn't seem to be workin - Matt Byrne 2014-04-11 00:34
@Jasny-ArnoldDaniels Your link seems to be broken, I get a 404 from Github - Matt Mc 2014-06-06 06:10
@MattMc Ok, updated the URL - Jasny - Arnold Daniels 2014-06-06 09:49
Really useful. + - George Harnwell 2018-07-11 15:18


22

That code transforms any bootstrap table row that has data-href attribute set into a clickable element

Note: data-href attribute is a valid tr attribute (HTML5), href attributes on tr element are not.

$(function(){
    $('.table tr[data-href]').each(function(){
        $(this).css('cursor','pointer').hover(
            function(){ 
                $(this).addClass('active'); 
            },  
            function(){ 
                $(this).removeClass('active'); 
            }).click( function(){ 
                document.location = $(this).attr('data-href'); 
            }
        );
    });
});
2015-03-18 17:56
by Simmoniz
good answer. work like a charm - Daroath 2015-10-08 15:04
brilliant solution, thank - Jonathan Laliberte 2018-01-12 02:34


6

I show you my example with modal windows...you create your modal and give it an id then In your table you have tr section, just ad the first line you see below (don't forget to set the on the first row like this

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>                                                                                                                                                                                   
2012-07-25 09:41
by matouuuuu
Awesome! This worked perfectly for me with the modals - kevthanewversi 2017-01-13 12:42


4

<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">
2013-05-25 00:25
by alpc
-1 This approach is quite old and is not the best. Javastript should be unobtrusive, which means should not be mixed with html - Piotr Lewandowski 2014-01-31 17:06
Yeah, but guess what? I don't have to load another bulky JS plugin or do attribute checking inside a jquery callback - Any Day 2014-11-21 01:47


0

May be you are trying to attach a function when table rows are clicked.

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = functioname(); //call the function like this
}
2012-04-04 00:26
by Starx


0

You can use in this way using bootstrap css. Just remove the active class if already assinged to any row and reassign to the current row.

    $(".table tr").each(function () {
        $(this).attr("class", "");
    });
    $(this).attr("class", "active");
2015-03-08 18:06
by Naren