如何在表格行<tr>中添加超链接

Question

如何在表格行<tr>中添加超链接

javascriptphpcsshtml-table

16

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

我想为每个 <tr> 分别提供一个 <a> 链接。由于在表格中只能向 <td> 添加数据，因此我无法实现这一点。

是否有其他方法可以实现这一目标?

- Rajasekar

1

对于仅限PHP的修复，只需将您想要的链接添加到该行中的每个单元格即可。 - Drew

6

安德鲁，这怎么只是 PHP 的修复？ - ClosureCowboy

12个回答

13

参考 @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;
    });
});

- Michael J. Calkins

我遇到了一个与 href 和 data-href 相关的问题：如果我使用 jQuery 选择器 $('table tr').first()，那么 href 或 data-href 属性就会消失，因此我无法通过 .attr('href') 或 data('href') 访问它们。 - static

9

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

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

- jonstout

4

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

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

- Nicole Bartley

2

如果你想让每个<tr>可点击，你可以为每个<tr>添加一个click事件，或者更好的方法是在table上添加一个.delegate()处理程序来管理其<tr>元素的点击。

$('#myTable').delegate('tr','click',function() {
    alert( 'i was clicked' );
});

此代码假设你的表格具有"myTable" ID:

<table id="myTable">
    <tr><td> cell </td></tr>
    <tr><td> cell </td></tr>
</table>

如果这不是你的意思，请澄清你的问题，并发布你正在使用的相关JavaScript代码。

- user113716

对于那些自 jQuery 1.7 以来一直在阅读此文档的人： "从 jQuery 1.7 开始，.delegate() 方法已被 .on() 方法取代。" http://api.jquery.com/delegate/ - gonzo

1

如果您需要在表格渲染后添加标记并且希望使用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>";
  }
}

我希望你会觉得这很有帮助

- CE Thomas

1

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

- mplungjan

0

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

这个？

- dqhendricks

0

将返回的锚点 jQuery.wrap 包装到 td 中，然后添加到 tr 中并使用 jQuery.appendTo 添加到 table 中。

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

- naveen

0

你可以像Nicole建议的那样，简单地使用gen函数和内部的with语句来生成：

<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 改造成像 a 标签一样工作的黑客方式（只是一个想法，从未真正尝试过）。

- Jerry Deng

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ahmet2106 · Accepted Answer

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>

使用jQuery库的JavaScript:

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

您可以在这里尝试： http://jsbin.com/ikada3

CSS（可选）：

table tr {
    cursor: pointer;
}

或者HTML有效版本使用data-href代替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：

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

CSS：

table tr[data-href] {
    cursor: pointer;
}