Question

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

我想为每个<a>分别提供<tr>个链接。从表中我们只能添加数据到<td>，我无法实现。

还有其他方法可以达到这个目的吗？

Answer 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>

使用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;
}

Answer 2

播放@ 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;
    });
});

Answer 3

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

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

Answer 4

如果您要说每个<tr>可点击，则可以向每个click添加<tr>个事件，或者更好的是，添加.delegate()处理table元素点击的<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代码。

Answer 5

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

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

Answer 6

高级建议是在生成表格时添加标记。如果您需要在表格渲染后执行此操作，并且您想要使用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>";
  }
}

我希望你能找到这个有用的

Answer 7

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

Answer 8

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

此？

Answer 9

jQuery.wrap将返回的锚点发送到td，然后添加到tr和jQuery.appendTo table

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

Answer 10

你可以简单地使用尼克尔建议的内部和内部：

<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工作就像一个标签一样工作（只是一个想法，从来没有真正尝试过。

Answer 11

加入

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

Answer 12

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

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

如何向表行添加超链接

12 个答案: