如何将超链接添加到表格行 <tr>

Posted 2023-02-22

【中文标题】如何将超链接添加到表格行 <tr>

【英文标题】：How to add hyperlink to table row <tr>

【发布时间】：2011-06-05 16:29:32

【问题描述】：

我有一个表格，其表格行 <tr> 在循环中生成以形成多行。

我想为每个<tr> 提供单独的<a> 链接。由于在表中我们只能向<td> 添加数据，因此我无法实现。

还有其他方法可以实现吗？

【问题讨论】：

对于仅 php 的修复，只需将每行所需的链接添加到该行中的每个单元格。

安德鲁，这是一个仅 PHP 的修复方法吗？

【参考方案1】：

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;

【讨论】：

我遇到的唯一问题是 href 在技术上不是表格行的有效属性。

此解决方案在没有 javascript 的情况下无法工作，并且盲人无法访问。

使用data-href 可以解决无效属性的问题。

我对@9​​87654332@ 和data-href 有疑问：如果我使用jquery $('table tr').first() 进行选择，那么href 或data-href 属性就会消失，因此我无法通过.attr('href') 访问它们或data('href')

另一个问题是你打破了中间点击。

【参考方案2】：

您可以使用data-href 脚本在任何html 元素中添加href。它使 html 有效，因为它只向元素添加 data-href 属性。

https://github.com/nathanford/data-href/

【参考方案3】：

最好的建议是在生成表格时添加标签。如果您需要在表格呈现后执行此操作并且您想使用 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>";
  

希望对你有帮助

【参考方案4】：

利用@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;
    );
);

【讨论】：

我对@9​​87654324@ 和data-href 有疑问：如果我使用jquery $('table tr').first() 进行选择，那么href 或data-href 属性就会消失，所以我无法通过.attr('href') 访问它们或data('href')

【参考方案5】：

我发现将表格行转换为链接的最简单方法是将 onclick 属性与 window.location 结合使用。

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>

【参考方案6】：

添加

并将显示样式更改为 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>

【参考方案7】：

您可以按照 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 像标签一样工作（只是一个想法，永远不要真正尝试它。

【参考方案8】：

jQuery.wrap将返回的锚点添加到td，然后添加到tr和jQuery.appendTotable

$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');

【参考方案9】：

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';
 .
 

【参考方案10】：

我同意第一个回复，需要更多信息。但如果你只是想制作一个链接表，你可以这样做

<tr><td><a href="...">...</a></td></tr>

【参考方案11】：

<tr><td><a></a></td></tr>

这个？

【参考方案12】：

如果您要让每个 <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 代码。

【讨论】：

对于那些从 jQuery 1.7 开始阅读本文的人：“从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。” api.jquery.com/delegate