我有一个表格，其表格行 <tr> 在循环中生成以形成多行。
我想为每个<tr> 提供单独的<a> 链接。由于在表中我们只能向<td> 添加数据，因此我无法实现。
还有其他方法可以实现吗？
【问题讨论】：
标签： javascript php css html-table
HTML：
<table>
<tr href="http://myspace.com">
<td>MySpace</td>
</tr>
<tr href="http://apple.com">
<td>Apple</td>
</tr>
<tr href="http://google.com">
<td>Google</td>
</tr>
</table>
JavaScript 使用 jQuery 库：
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).attr('href');
return false;
});
});
你可以在这里试试这个：http://jsbin.com/ikada3
CSS（可选）：
table tr {
cursor: pointer;
}
或使用data-href 代替href 的HTML 有效版本：
<table>
<tr data-href="http://myspace.com">
<td>MySpace</td>
</tr>
<tr data-href="http://apple.com">
<td>Apple</td>
</tr>
<tr data-href="http://google.com">
<td>Google</td>
</tr>
</table>
JS：
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).data('href');
return false;
});
});
CSS：
table tr[data-href] {
cursor: pointer;
}
【讨论】：
data-href 可以解决无效属性的问题。
data-href 有疑问：如果我使用jquery $('table tr').first() 进行选择，那么href 或data-href 属性就会消失，因此我无法通过.attr('href') 访问它们或data('href')
您可以使用data-href 脚本在任何html 元素中添加href。它使 html 有效，因为它只向元素添加 data-href 属性。
【讨论】：
最好的建议是在生成表格时添加标签。如果您需要在表格呈现后执行此操作并且您想使用 javascript，您可以随时添加类似
var mytable = document.getElementById("theTable")
var myrows = mytable.rows
for(i=0;i < myrows.length;i++)
{
var oldinner;
oldinner = myrows[i].cells[0].innerHTML;
myrows[i].cells[0].innerHTML = "<a>" + oldinner + "</a>";
}
或者如果你需要对每个单元格都这样做，你总是可以的
var mytable = document.getElementById("theTable")
var myrows = mytable.rows
for(i=0;i < myrows.length;i++)
{
mycells = myrows[i].cells;
for(a=0;a < mycells.length;a++)
{
var oldinner;
oldinner = mycells[a].innerHTML;
mycells[a].innerHTML = "<a>" + oldinner + "</a>";
}
}
希望对你有帮助
【讨论】：
利用@ahmet2016 并保持其 W3C 标准。
HTML：
<tr data-href='LINK GOES HERE'>
<td>HappyDays.com</td>
</tr>
CSS：
*[data-href] {
cursor: pointer;
}
jQuery:
$(function(){
$('*[data-href]').click(function(){
window.location = $(this).data('href');
return false;
});
});
【讨论】：
data-href 有疑问：如果我使用jquery $('table tr').first() 进行选择，那么href 或data-href 属性就会消失，所以我无法通过.attr('href') 访问它们或data('href')
我发现将表格行转换为链接的最简单方法是将 onclick 属性与 window.location 结合使用。
<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>
【讨论】：
添加
并将显示样式更改为 display:block
并为这样添加相同的大小：
CSS：
#Table a {
display:block;
}
#Table td {
width:100px;
hright:100px
}
HTML：
<table id="Table">
<tr><td><a onclick="" href="#"> cell </a></td></tr>
<tr><td> cell </td></tr>
</table>
【讨论】：
您可以按照 Nicole 的建议简单地生成 with 和 inside：
<tr><td><a href="url">title of the url</a></td></tr>
或者把 url 放在 tr 标签中，比如 包含 jQuery
$('tr.clickable').click(function(){
window.location = $(this).attr("title");
});
点击后将您带到该页面（基本上是破解 tr 像标签一样工作（只是一个想法，永远不要真正尝试它。
【讨论】：
jQuery.wrap将返回的锚点添加到td，然后添加到tr和jQuery.appendTotable
$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');
【讨论】：
PHP：
echo "<tr onclick=\"window.location='".$links[$i]."'\">......";
没有 jQuery 的 Javascript：
x=1;
.
.
for (...) {
var tr=document.createElement('tr');
tr.onclick=function() { window.location='page'+(x++)+'.html'}
tr.style.cursor='pointer';
.
}
会让用户点击每一行 您也可以使用数组来加载页面：
x=0;
var pages=["pagea.html","pageb.html"]
.
.
for (...) {
var tr=document.createElement('tr');
tr.onclick=function() { window.location=page[x++];}
tr.style.cursor='pointer';
.
}
【讨论】：
我同意第一个回复，需要更多信息。但如果你只是想制作一个链接表，你可以这样做
<tr><td><a href="...">...</a></td></tr>
【讨论】：
<tr><td><a></a></td></tr>
这个？
【讨论】：
如果您要让每个 <tr> 可点击，您可以向每个 <tr> 添加一个 click 事件，或者更好的是，向管理的 table 添加一个 .delegate() 处理程序点击其<tr> 元素。
$('#myTable').delegate('tr','click',function() {
alert( 'i was clicked' );
});
此代码假定您的table 具有myTable ID：
<table id="myTable">
<tr><td> cell </td></tr>
<tr><td> cell </td></tr>
</table>
如果这不是您的意思，请澄清您的问题，并发布您正在使用的相关 JavaScript 代码。
【讨论】：