如何使bootstrap表行可单击?

时间:2012-04-03 23:03:42

标签: css html5 twitter-bootstrap

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

7 个答案:

答案 0 :(得分:67)

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

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

答案 1 :(得分:57)

javascript plugin将此功能添加到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>

将转换表格,以便可以单击整行而不是第一列。

答案 2 :(得分:22)

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

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

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

答案 3 :(得分:6)

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

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

答案 4 :(得分:4)

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

答案 5 :(得分:0)

单击表行时,您可能正在尝试附加函数。

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
}

答案 6 :(得分:0)

您可以使用bootstrap css以这种方式使用。如果已经分配给任何行,只需删除活动类并分配给当前行。

    $(".table tr").each(function () {
        $(this).attr("class", "");
    });
    $(this).attr("class", "active");