Html 如何使引导表行可点击?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10002704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make bootstrap table rows clickable?
提问by rjurney
I can hack this myself, but I think bootstrap has this capability.
我可以自己破解这个,但我认为 bootstrap 有这种能力。
回答by Terry
Using jQuery it's quite trivial. v2.0 uses the table
class on all tables.
使用 jQuery 非常简单。v2.0table
在所有表上使用该类。
$('.table > tbody > tr').click(function() {
// row was clicked
});
回答by Arnold Daniels
There is a javascript pluginthat adds this feature to bootstrap.
有一个javascript 插件可以将此功能添加到引导程序。
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.
表格将被转换,以便可以单击整行而不是仅单击第一列。
回答by Simmoniz
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.
注意:data-href
attribute 是一个有效的tr
属性(HTML5),href
tr 元素上的属性不是。
$(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');
}
);
});
});
回答by matouuuuu
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>
回答by alpc
<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
style="cursor:pointer;">
回答by Naren
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.
您可以使用 bootstrap css 以这种方式使用。如果已经分配给任何行并重新分配给当前行,只需删除活动类。
$(".table tr").each(function () {
$(this).attr("class", "");
});
$(this).attr("class", "active");
回答by Starx
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
}