使 HTML 表格的一行成为链接的最佳方法是什么？我目前正在使用 jquery 对行进行斑马条纹，并突出显示 onmouseover/off 选定的行，所以如果 JavaScript 是答案，请使用 jquery。
【问题讨论】：
标签： jquery html html-table
我只是使用 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>
【讨论】：
$(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");
});
});
【讨论】：
tr 时，问题就来了，就像他们点击a 元素一样（即shift+click 或cmd+click 来打开新标签等）
href 不是更好的属性吗？
为 tr 元素注册一个 onclick 事件处理程序。像这样使用 jQuery:
$("tr").bind("click", function(){
window.location = 'http://www.example.com/';
});
【讨论】：
如果您不介意用通用元素替换表格，则不需要 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>
【讨论】：
<td>
<a href="/whatevs/whatevs">
<div class="tdStreacher"> linkName
</div>
</a>
</td>
.tdStreacher{
height: 100%;
width: 100%;
padding: 3px;
}
这样，每个单元格的所有区域都将充当链接，因此，整行都充当链接。
【讨论】：
这是一个基于 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);
期望行被包裹在 tbody 中。高度是明确设置的，因为尼克的原始解决方案不适用于我在具有不同高度的相邻单元格上。 确保将 a 元素设置为块。如果要应用填充，请将其应用到 a 元素而不是表格单元格：
a {
display: block;
padding: 0.25em 0.5em;
}
tbody td { padding: 0; }
只需调用
$('#your-table').linkWholeRows();
希望对您有所帮助。干杯， 理查德
【讨论】：