Html 如何使表格中的整行可点击作为链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17147821/
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 make a whole row in a table clickable as a link?
提问by user1038814
I'm using Bootstrap and the following doesn't work:
我正在使用 Bootstrap，但以下内容不起作用：
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>￡158,000</td>
</tr>
</a>
</tbody>
回答by Ahmed Masud
Author's note I:
作者的话我：
Please look at other answers below, especially ones that do not use jquery.
请查看下面的其他答案，尤其是那些不使用 jquery 的答案。
Author's note II:
作者的话二：
Preserved for posterity but surely the wrongapproach in 2020. (Was non idiomatic even back in 2017)
为后人保留，但在 2020 年肯定是错误的方法。（即使在 2017 年也是不惯用的）
Original Answer
原答案
You are using Bootstrap which means you are using jQuery :^), so one way to do it is:
您正在使用 Bootstrap，这意味着您正在使用 jQuery :^)，因此一种方法是：
<tbody>
<tr class='clickable-row' data-href='url://'>
<td>Blah Blah</td> <td>1234567</td> <td>￡158,000</td>
</tr>
</tbody>
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
window.location = $(this).data("href");
});
});
Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQueryand how to write handlers;
当然，您不必使用 href 或切换位置，您可以在点击处理函数中做任何您喜欢的事情。阅读jQuery以及如何编写处理程序；
Advantage of using a classover idis that you can apply the solution to multiple rows:
使用类而不是id 的优点是您可以将解决方案应用于多行：
<tbody>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td>Blah Blah</td> <td>1234567</td> <td>￡158,000</td>
</tr>
<tr class='clickable-row' data-href='url://some-other-link/'>
<td>More money</td> <td>1234567</td> <td>￡800,000</td>
</tr>
</tbody>
and your code base doesn't change. The same handler would take care of all the rows.
并且您的代码库不会改变。相同的处理程序将处理所有行。
Another option
另外一个选项
You can use Bootstrap jQuery callbacks like this (in a document.readycallback):
您可以像这样使用 Bootstrap jQuery 回调（在document.ready回调中）：
$("#container").on('click-row.bs.table', function (e, row, $element) {
window.location = $element.data('href');
});
This has the advantage of not being reset upon table sorting (which happens with the other option).
这具有在表排序时不会被重置的优点（其他选项会发生这种情况）。
Note
笔记
Since this was posted window.document.locationis obsolete (or deprecated at the very least) use window.locationinstead.
由于此贴window.document.location已过时（或至少已弃用），因此请window.location改用。
回答by davidfurber
You can't do that. It is invalid HTML. You can't put a <a>in between a <tbody>and a <tr>. Try this instead:
你不能那样做。它是无效的 HTML。您不能将 a<a>放在 a<tbody>和 a之间<tr>。试试这个：
<tr onclick="window.location='#';">
...
</tr>
add style for pointer view
为指针视图添加样式
[data-href] { cursor: pointer; }
When you work up to it, you'd want to use JavaScript to assign the click handler outside of the HTML.
当您开始工作时，您可能希望使用 JavaScript 在 HTML 之外分配点击处理程序。
回答by dsgriffin
You could include an anchor inside every <td>, like so:
您可以在 each 中包含一个锚点<td>，如下所示：
<tr>
<td><a href="#">Blah Blah</a></td>
<td><a href="#">1234567</a></td>
<td><a href="#">more text</a></td>
</tr>
You could then use display:block;on the anchors to make the full row clickable.
然后，您可以使用display:block;锚点使整行可点击。
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
This is probably about as optimum as you're going to get it unless you resort to JavaScript.
除非您使用 JavaScript，否则这可能与您将要获得的最佳效果差不多。
回答by Trevin Avery
A linked table row is possible, but not with the standard <table>elements. You can do it using the display: tablestyle properties. Hereand hereare some fiddles to demonstrate.
链接表行是可能的，但不能使用标准<table>元素。您可以使用display: table样式属性来完成。这里和这里有一些小提琴来演示。
This code should do the trick:
这段代码应该可以解决问题：
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
}
.row:hover {
background-color: #cccccc;
}
.cell:hover {
background-color: #e5e5e5;
}<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<div role="grid" class="table">
<div role="row" class="row">
<div role="gridcell" class="cell">
1.1
</div>
<div role="gridcell" class="cell">
1.2
</div>
<div role="gridcell" class="cell">
1.3
</div>
</div>
<a role="row" class="row" href="#">
<div role="gridcell" class="cell">
2.1
</div>
<div role="gridcell" class="cell">
2.2
</div>
<div role="gridcell" class="cell">
2.3
</div>
</a>
</div>Note that ARIA roles are needed to ensure proper accessibility since the standard <table>elements are not used. You may need to add additional roles like role="columnheader"if applicable. Find out more at the guide here.
请注意，由于<table>未使用标准元素，因此需要 ARIA 角色来确保适当的可访问性。role="columnheader"如果适用，您可能需要添加其他角色。在此处的指南中了解更多信息。
回答by Krishna Gupta
Achieved using standard Bootstrap 4.3+ as follows - no jQuery nor any extra css classes needed!
使用标准 Bootstrap 4.3+ 实现，如下所示 - 不需要 jQuery 或任何额外的 css 类！
The key is to use stretched-linkon the text within the cell and defining <tr>as a containing block.
关键是stretched-link在单元格内的文本上使用并定义<tr>为包含块。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
<tbody>
<tr style="transform: rotate(0);">
<th scope="row"><a href="#" class="stretched-link">1</a></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>You can define containing block in different ways for example setting transformto not none value (as in example above).
您可以以不同的方式定义包含块，例如设置transform为 not none 值（如上例所示）。
For more information read here's the Bootstrap documentationfor stretched-link.
欲了解更多信息，请阅读这里的引导文件的stretched-link。
回答by AbdelElrafa
A much more flexible solution is to target anything with the data-href attribute. This was you can reuse the code easily in different places.
一个更灵活的解决方案是使用 data-href 属性定位任何内容。这是您可以在不同地方轻松重用代码。
<tbody>
<tr data-href="https://google.com">
<td>Col 1</td>
<td>Col 2</td>
</tr>
</tbody>
Then in your jQuery just target any element with that attribute:
然后在您的 jQuery 中，只需定位具有该属性的任何元素：
jQuery(document).ready(function($) {
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
});
And don't forget to style your css:
并且不要忘记设置您的 css 样式：
[data-href] {
cursor: pointer;
}
Now you can add the data-href attribute to any element and it will work. When I write snippets like this I like them to be flexible. Feel free to add a vanilla js solution to this if you have one.
现在您可以将 data-href 属性添加到任何元素，它就会起作用。当我写这样的片段时，我喜欢它们灵活。如果你有一个，请随意添加一个 vanilla js 解决方案。
回答by phlegx
You can use this bootstrap component:
您可以使用此引导程序组件：
http://jasny.github.io/bootstrap/javascript/#rowlink
http://jasny.github.io/bootstrap/javascript/#rowlink
Jasny Bootstrap
贾斯尼引导程序
The missing components for your favorite front-end framework.
您最喜欢的前端框架缺少的组件。
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
</thead>
<tbody data-link="row" class="rowlink">
<tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
</tbody>
</table>
Usage
用法
Via data attributes
通过数据属性
Add class .rowlinkand attribute data-link="row"to a <table>or <tbody>element. For other options append the name to data-, as in data-target="a.mainlink"A cell can be excluded by adding the .rowlink-skipclass to the <td>.
将类.rowlink和属性添加data-link="row"到<table>或<tbody>元素。对于其他选项，将名称附加到 data-，如在 .a 中data-target="a.mainlink"可以通过将.rowlink-skip类添加到<td>.
Via JavaScript
通过 JavaScript
Call the input mask via javascript:
通过javascript调用输入掩码：
$('tbody.rowlink').rowlink()
回答by Ronen
There is a nice way to technically do it with <a>tag inside <tr>, which might be semantically incorrect (might give you a browser warning), but will work with no JavaScript/jQueryrequired:
有一种很好的方法可以在技术上使用<a>标签 inside来完成它<tr>，这可能在语义上不正确（可能会给你一个浏览器警告），但JavaScript/jQuery不需要：
<!-- HTML -->
<tbody>
<tr class="bs-table-row">
<td>Blah Blah</td>
<td>1234567</td>
<td>￡158,000</td>
<a class="bs-row-link" href="/your-link-here"></a>
</tr>
</tbody>
/* CSS */
.bs-table-row {
position: 'relative';
}
.bs-row-link {
position: 'absolute';
left: 0;
height: '36px'; // or different row height based on your requirements
width: '100%';
cursor: 'pointer';
}
PS: Notice the trick here is to put <a>tag as last element, otherwise it will try to take the space of the first <td>cell.
PS：注意这里的技巧是把<a>标签作为最后一个元素，否则它会尝试占用第一个<td>单元格的空间。
PPS: Now your entire row will be clickable and you can use this link to open in new tab as well (Ctrl/CMD+click)
PPS：现在您的整行都可以点击，您也可以使用此链接在新选项卡中打开（Ctrl/CMD+点击）
回答by Anahit Serobyan
You can use onclick javascript method in tr and make it clickable, also if you need to build your link due to some details you can declare a function in javascript and call it in onclick, passing some values.
您可以在 tr 中使用 onclick javascript 方法并使其可点击，如果由于某些细节需要构建链接，您可以在 javascript 中声明一个函数并在 onclick 中调用它，传递一些值。
回答by Todd Skelton
You can add the button role to a table row and Bootstrap will change the cursor without any css changes. I decided to use that role as a way to easily make any row clickable with very little code.
您可以将按钮角色添加到表格行，Bootstrap 将更改光标而无需任何 css 更改。我决定使用这个角色作为一种方式，用很少的代码轻松地使任何行都可以点击。
Html
html
<table class="table table-striped table-hover">
<tbody>
<tr role="button" data-href="#">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
jQuery
jQuery
$(function(){
$(".table").on("click", "tr[role=\"button\"]", function (e) {
window.location = $(this).data("href");
});
});
You can apply this same principle to add the button role to any tag.
您可以应用相同的原则将按钮角色添加到任何标签。
