Javascript 如何使用 Bootstrap 在表格中创建可点击的行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30482050/
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 to create clickable row in table using Bootstrap?
提问by yehonatan
I'm trying to use Bootstrap to make the rows clickable but all I found is about lists. Is any way to do this?
我正在尝试使用 Bootstrap 使行可点击，但我发现的只是列表。有没有办法做到这一点？
I wrote this:
我是这样写的：
<table class="table table-hover">
<tr>
<td><strong>FirstName</strong></td>
<td><strong>LastName</strong></td>
<td><strong>Start</strong></td>
<td><strong>End</strong></td>
</tr>
<tr><a href="user/student">
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</a></tr>
</table>
but it didn't work.
但它没有用。
回答by Zee
Why don't you simply attach an onclickevent like this:
为什么不简单地附加这样的onclick事件：
<table class="table table-striped">
<tr onclick="window.location.href = 'url';">>
<td><strong>FirstName</strong></td>
<td><strong>LastName</strong></td>
<td><strong>Start</strong></td>
<td><strong>End</strong></td>
</tr>
<tr onclick="window.location.href = 'url';">
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</a></tr>
</table>
Note:I would recommend you to use jQuery as bootstrap also uses jQuery.
注意：我建议您使用 jQuery，因为引导程序也使用 jQuery。
回答by Rusdi Karsandi
Don't put anchor in nested tr. It's not a proper use. Instead, use the
不要将锚放在嵌套的 tr 中。这不是正确的用法。相反，使用
onclick="getElementById('edit-1').click()"
and add
并添加
style="cursor: pointer"
style="cursor: pointer"
<table class="table table-hover">
<tr>
<td><strong>FirstName</strong></td>
<td><strong>LastName</strong></td>
<td><strong>Start</strong></td>
<td><strong>End</strong></td>
</tr>
<tr onclick="getElementById('edit-1').click()" style="cursor: pointer">
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td><a href="url-here" id="edit-1">dddd</a></td>
</tr>
回答by Serhat MERCAN
Also you can add a function all tr same time;
您也可以同时添加一个函数；
$("tr").click(function(){
// your click time codes...
});
table-hover class only add to rows color change property. not click function definition!
table-hover 类仅添加到行颜色更改属性。不是点击函数定义！
回答by Coding Enthusiast
So you want to be able to navigate to another page. If you are planning to go to another page as you said in the comments, you might want to use location.href = url. the first solution will work if you click on any row.
所以你希望能够导航到另一个页面。如果您打算像评论中所说的那样转到另一个页面，则可能需要使用 location.href = url。如果您单击任何行，第一个解决方案将起作用。
<table class="table table-hover">
<tr>
<td><strong>FirstName</strong></td>
<td><strong>LastName</strong></td>
<td><strong>Start</strong></td>
<td><strong>End</strong></td>
</tr>
<tr><a>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</a></tr>
</table>
$("row").click(function(){
//to navigate to another page
location.href = 'user/student';//the other page's url
});
Another way to implement this is by using the onclick in the specific row. This solution will work if you click on the specific row that has the onclick.
实现此目的的另一种方法是在特定行中使用 onclick。如果您单击具有 onclick 的特定行，则此解决方案将起作用。
<table class="table table-hover">
<tr onclick="location.href='user/student';">
<td><strong>FirstName</strong></td>
<td><strong>LastName</strong></td>
<td><strong>Start</strong></td>
<td><strong>End</strong></td>
</tr>
<tr><a>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</a></tr>
</table>
Another way is to give an id to the row and use js or jquery to select that id and navigate to the page you want like below:
另一种方法是为该行提供一个 id 并使用 js 或 jquery 选择该 id 并导航到您想要的页面，如下所示：
<table class="table table-hover">
<tr id="row1">
<td><strong>FirstName</strong></td>
<td><strong>LastName</strong></td>
<td><strong>Start</strong></td>
<td><strong>End</strong></td>
</tr>
<tr><a>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</a></tr>
</table>
//now you can use this to navigate
$('#row1').on('click', function(){
window.location = "user/student";
});
回答by Marcos Felipe
I had the same problem.
I solved so:
1 - put ID in your table:
我有同样的问题。
我是这样解决的：
1 - 把 ID 放在你的表里：
"tbListaFiadores"
“tbListaFiadores”
2 - configure your table with :
2 - 配置您的表：
clickToSelect: true,
点击选择：真，
3 - get click event :
3 - 获取点击事件：
$('#tbListaFiadores').on('click-row.bs.table', function (e, row, $element) {
console.log("onClickRow normal");
});
$('#tbListaFiadores').on('click-row.bs.table', function (e, row, $element) {
console.log("onClickRow normal");
});
回答by victommasi
The cleanest way I see is to use jasny bootstrap component
我看到的最干净的方法是使用jasny bootstrap 组件
Import the .js file into your project
Put on tbody:
<tbody data-link="row" class="rowlink hand-cursor">Put an aelement on first tdelement
<a href="#path"> path </a>- Now the link is already working. To make it rich use this css file and its classes:
将 .js 文件导入到您的项目中
穿上 tbody：
<tbody data-link="row" class="rowlink hand-cursor">将a元素放在第一个td元素上
<a href="#path"> path </a>- 现在链接已经工作。要使其丰富，请使用此 css 文件及其类：
CSS
CSS
.hand-cursor {
cursor: pointer;
cursor: hand;
}
.table-hoverplus>tbody>tr:hover>td {
background-color: #eeeeee;
}
