如何使bootstrap表行可单击？

Question

我可以自己破解,但我认为bootstrap具有这种能力.

Answer 1

使用jQuery非常简单.v2.0 table在所有表上使用该类.

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

Answer 2

有一个javascript插件将此功能添加到bootstrap.

什么时候rowlink.js包括你可以做:

<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>

该表将被转换,以便可以单击整行而不是仅第一列.

Answer 3

该代码将具有data-href属性集的任何引导程序表行转换为可单击元素

注意:data-hrefattribute是有效tr属性(HTML5),hreftr元素上的属性不是.

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

Answer 4

我用模态窗口向你展示我的例子...你创建你的模态并给它一个id然后在你的表中你有tr部分,只是广告你在下面看到的第一行(不要忘记设置在第一行像这个

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>