Javascript 如何将超链接添加到表格行 <tr>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4632738/
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 add hyperlink to table row <tr>
提问by Rajasekar
I am having a table with its table row <tr>generating in a loop to form multiple rows.
我有一个表格，它的表格行在<tr>循环中生成以形成多行。
I want to give separate <a>link to each <tr>. Since in table we can add only add data to <td>only, I am not able to achieve that.
我想给<a>每个<tr>. 由于在表中我们只能添加添加数据<td>，我无法实现。
Is there any other way to achieve this?
有没有其他方法可以实现这一目标？
回答by ahmet2106
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 using jQueryLibrary:
JavaScript 使用jQuery库：
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).attr('href');
return false;
});
});
You can try this here: http://jsbin.com/ikada3
你可以在这里试试这个：http: //jsbin.com/ikada3
CSS (optional):
CSS（可选）：
table tr {
cursor: pointer;
}
OR the HTML valid version with data-hrefinstead of href:
或使用data-href代替的 HTML 有效版本href：
<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:
JS：
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).data('href');
return false;
});
});
CSS:
CSS：
table tr[data-href] {
cursor: pointer;
}
回答by Michael J. Calkins
Playing off of @ahmet2016 and keeping it W3C standard.
玩转@ahmet2016 并保持它的 W3C 标准。
HTML:
HTML：
<tr data-href='LINK GOES HERE'>
<td>HappyDays.com</td>
</tr>
CSS:
CSS：
*[data-href] {
cursor: pointer;
}
jQuery:
jQuery：
$(function(){
$('*[data-href]').click(function(){
window.location = $(this).data('href');
return false;
});
});
回答by jonstout
The easiest way I've found to turn a table row into a link is to use the onclick attribute with window.location.
我发现将表格行转换为链接的最简单方法是将 onclick 属性与 window.location 结合使用。
<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>
回答by user113716
If you're saying that you want to make each <tr>clickable, you can add a clickevent to each <tr>, or better yet, add a .delegate()handler to the tablethat manages clicks on its <tr>elements.
如果您说要使每个<tr>可点击，您可以click向 each添加一个事件<tr>，或者更好的是，.delegate()向table管理添加对其<tr>元素的点击的处理程序。
$('#myTable').delegate('tr','click',function() {
alert( 'i was clicked' );
});
This code assumes your tablehas the myTableID:
此代码假定您table具有以下myTableID：
<table id="myTable">
<tr><td> cell </td></tr>
<tr><td> cell </td></tr>
</table>
If this isn't what you meant, then please clarify your question, and post the relevant javascript code you're using.
如果这不是您的意思，那么请澄清您的问题，并发布您正在使用的相关 javascript 代码。
回答by Nicole Bartley
I agree with the first response, more information is needed. But if you're just trying to make a table of links, you can just do
我同意第一个回答，需要更多信息。但是如果你只是想制作一个链接表，你可以这样做
<tr><td><a href="...">...</a></td></tr>
回答by CE Thomas
The premium suggestion would be to add the tags when you generate the table. If you need to do it after the table is rendered and you want to use javascript you can always add something like
高级建议是在生成表格时添加标签。如果您需要在表格呈现后执行此操作并且您想使用 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>";
}
or if you need to do it to every cell, your can always
或者如果你需要对每一个细胞都做，你总是可以
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>";
}
}
I hope you find this helpful
我希望你觉得这有用
回答by mplungjan
PHP:
PHP：
echo "<tr onclick=\"window.location='".$links[$i]."'\">......";
Javascript without jQuery:
没有 jQuery 的 Javascript：
x=1;
.
.
for (...) {
var tr=document.createElement('tr');
tr.onclick=function() { window.location='page'+(x++)+'.html'}
tr.style.cursor='pointer';
.
}
will let the user click on each row you can use an array to load the pages too:
将让用户单击每一行，您也可以使用数组来加载页面：
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';
.
}
回答by naveen
jQuery.wrapthe returned anchor to a tdand then add to trand jQuery.appendTotable
jQuery.wrap返回的锚点到 atd然后添加到tr和jQuery.appendTotable
$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');
回答by Jerry Deng
You can simply gen the with and inside as Nicole suggested:
您可以按照妮可的建议简单地生成 with 和 inside ：
<tr><td><a href="url">title of the url</a></td></tr>
Or put the url in the tr tag like With jQuery included
或者将 url 放在 tr 标签中，例如 With jQuery includes
$('tr.clickable').click(function(){
window.location = $(this).attr("title");
});
to bring you to that page on click (basically hacking a tr to work like a tag (just a thought, never really try it.
在点击时将您带到该页面（基本上是将 tr 破解为像标签一样工作（只是一个想法，从未真正尝试过。
回答by Abudayah
add in
加入
and change display style to display:block
并将显示样式更改为 display:block
and add same size for like this:
并像这样添加相同的大小：
CSS:
CSS：
#Table a {
display:block;
}
#Table td {
width:100px;
hright:100px
}
HTML:
HTML：
<table id="Table">
<tr><td><a onclick="" href="#"> cell </a></td></tr>
<tr><td> cell </td></tr>
</table>
