How do I make bootstrap table rows clickable?

Question

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

They're already clickable. Did you want them to **do** something when clicked? If so, what? — ceejayoz, Apr 04 '12 at 00:20

score 69 · Accepted Answer · edited Nov 26 '15 at 15:57

69

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

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

edited Nov 26 '15 at 15:57

Community

1
1

answered Apr 04 '12 at 00:19

Terry

14,099
9
56
84

22

If you want to bind the click event only to the table body rows then use the '.table > tbody > tr' selector. – miguelcobain Jun 20 '12 at 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 it – Muneem Habib Mar 18 '15 at 05:49
2

@MuneemHabib just add id to that table and use the id selector `$('#my_id > tbody > tr')` – stefita May 26 '15 at 23:32
9

Use `.on('click', function(){}); ` instead of `.click` – Maurice Oct 14 '15 at 17:13
2

@MaHo Perhaps you can qualify why? – troelskn Mar 30 '16 at 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() `. – Maurice Mar 30 '16 at 10:10
@troelskn The reason why would be because with `.on`, if the table rows are pulled dynamically over AJAX or created in Javascript after the click handler loads, then you can still intercept it. It's akin to the deprecated but useful `.delegate` handler that's now part of the `.on` handler if specified properly. – Volomike Nov 20 '20 at 16:26

Arnold Daniels · Answer 2 · 2014-06-06T09:46:47.120

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.

edited Jun 06 '14 at 09:46

answered Jul 25 '12 at 10:36

Arnold Daniels

16,516
4
53
82

nice work with your fork. Please adjust the example how to use twitter-bootstrap and your bootstrap version for this question. – CSchulz Feb 15 '14 at 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/#rowlink – Arnold Daniels Feb 16 '14 at 01:00
2

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 Mar 15 '14 at 09:21
2

@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. – Arnold Daniels Mar 16 '14 at 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 working – Matt Byrne Apr 11 '14 at 00:34
@Jasny-ArnoldDaniels Your link seems to be broken, I get a 404 from Github. – Matt Mc Jun 06 '14 at 06:10

score 25 · Answer 3 · edited Aug 05 '15 at 13:57

25

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'); 
            }
        );
    });
});

edited Aug 05 '15 at 13:57

idmean

14,540
9
54
83

answered Mar 18 '15 at 17:56

Simmoniz

1,080
15
27

1

good answer. work like a charm! – Daroath Oct 08 '15 at 15:04
brilliant solution, thanks – Jonathan Laliberte Jan 12 '18 at 02:34

score 6 · Answer 4 · edited Apr 09 '15 at 13:06

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>

edited Apr 09 '15 at 13:06

awesoon

32,469
11
74
99

answered Jul 25 '12 at 09:41

matouuuuu

69
1
1

Awesome! This worked perfectly for me with the modals. – kevthanewversi Jan 13 '17 at 12:42

score 3 · Answer 5 · edited Feb 07 '17 at 00:59

3

<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">

edited Feb 07 '17 at 00:59

Matthew Lock

13,144
12
92
130

answered May 25 '13 at 00:25

alpc

598
3
6

3

-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 Jan 31 '14 at 17:06
12

Yeah, but guess what? I don't have to load another bulky JS plugin or do attribute checking inside a jquery callback. – Any Day Nov 21 '14 at 01:47
You can still do this without mixing js and html, using plain javascript – wi2ard Apr 14 '21 at 08:43

score 0 · Answer 6 · answered Apr 04 '12 at 00:26

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
}

score 0 · Answer 7 · answered Mar 08 '15 at 18:06

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");

How do I make bootstrap table rows clickable?

7 Answers7

Linked