如何使引导表行可单击?(复制)

This question already has an answer here:

这个问题已经有了答案:

how to make a whole row in a table clickable as a link? 17 answers
如何使表中的整个行作为链接可单击?17个答案

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

我自己可以破解，但我认为bootstrap有这个功能。

7 个解决方案

#1

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

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

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

#2

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

有一个javascript插件将这个特性添加到bootstrap中。

When rowlink.js is included you can do:

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

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

将对表进行转换，以便可以单击整个行，而不只是单击第一列。

#3

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

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

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

注意:数据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'); 
            }
        );
    });
});

#4

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

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

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

#5

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

#6

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
}

#7

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.

您可以用这种方式使用引导css。只要将活动类移除(如果已被加载到任何行)并重新分配到当前行。

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

#1