jQuery HTML 表格行链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/569355/
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
HTML table row link
提问by hacintosh
What is the best way to make a row of an HTML table a link? I currently am using jquery to zebra stripe the rows and also to highlight the onmouseover/off selected row, so if JavaScript is the answer, please use jquery.
将 HTML 表格的一行作为链接的最佳方法是什么？我目前正在使用 jquery 对行进行斑马条纹并突出显示 onmouseover/off 选定的行，所以如果 JavaScript 是答案，请使用 jquery。
回答by Nick Van Brunt
I just use css:
我只使用 css：
<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
<td><a href="#">Linky1</a></td>
<td><a href="#">Data1</a></td>
</tr>
<tr>
<td><a href="#">Linky2</a></td>
<td><a href="#">Data2</a></td>
</tr>
</table>
回答by hunter
$(document).ready(function(){
$("tr").click(function(){
/* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com">) on the tr and pull it off on click */
window.location = $(this).attr("url");
});
});
回答by Ronny Vindenes
Register a onclick event handler for the tr element. Something like this using jQuery:
为 tr 元素注册一个 onclick 事件处理程序。像这样使用jQuery：
$("tr").bind("click", function(){
window.location = 'http://www.example.com/';
});
回答by Jorn Mineur
You do not need jQuery if you don't mind replacing the table by generic elements:
如果您不介意用通用元素替换表格，则不需要 jQuery：
<style>
.table {
border-collapse: collapse;
border-spacing: 0;
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
</style>
<section class="table">
<a class="tr" href="#">
<div class="td">
A
</div>
<div class="td">
B
</div>
<div class="td">
C
</div>
</a>
</section>
回答by uggeh
<td>
<a href="/whatevs/whatevs">
<div class="tdStreacher"> linkName
</div>
</a>
</td>
.tdStreacher{
height: 100%;
width: 100%;
padding: 3px;
}
This way, all the area of each cell will act as a link, hence, the whole row act as a link.
这样，每个单元格的所有区域都将充当链接，因此，整行充当链接。
回答by Richard Kiefer
Here is a jQuery plugin based on Nick's solution.
这是一个基于 Nick 解决方案的 jQuery 插件。
(function($) {
$.fn.linkWholeRows = function() {
// for each object
return this.each(function() {
// for each row
$(this).find('tbody tr').each(function() {
// get the first link's href
var href = $(this).find('td > a').attr('href');
// if none found then
if (href === undefined) {
return true; // continue
}
// wrap all cells with links that do not already have a link
$(this).children().not(':has(a)').each(function() {
$(this).contents().wrapAll('<a href="' + href + '" />');
});
// apply the row's height to all links
// in case that the cells' content have different heights
var height = $(this).children().css('height');
$(this).find('td > a').each(function() {
$(this).css('height', height);
// do not forget to apply display:block to the links
// via css to make it work properly
});
}); // each row
}); // each object
};
})(jQuery);
Expects rows to be wrapped in tbody's. The height is set explicitly as Nick's original solution did not work for me on neighbouring cells with different heights. Make sure to style a-elements as blocks. If you want to apply padding, apply it to the a-elements instead of table cells:
期望行被包裹在 tbody 中。高度是明确设置的，因为尼克的原始解决方案在具有不同高度的相邻单元格上对我不起作用。确保将 a 元素的样式设置为块。如果要应用填充，请将其应用于 a 元素而不是表格单元格：
a {
display: block;
padding: 0.25em 0.5em;
}
tbody td { padding: 0; }
Simply call
只需致电
$('#your-table').linkWholeRows();
Hope it helps. Cheers, Richard
希望能帮助到你。干杯，理查德
