html - 表格行像链接

Question

我不能将我的表行设置为某些东西的链接.我只能使用css和html.我尝试了不同的东西,从div到另一个,但仍然不能使它工作.

Answer 1

您有两种方法可以做到这一点:

• 使用javascript:

  <tr onclick="document.location = 'links.html';">

• 使用锚点:

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

我做了第二项工作:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

要摆脱列之间的死空间:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

这是第二个例子的简单演示:DEMO

Answer 2

我自己做了一个自定义的jquery函数:

HTML

<tr data-href="site.com/whatever">

jQuery的

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

对我来说简单而完美.希望它能帮到你.

(我知道OP只想要CSS和HTML,但考虑jQuery)

编辑

与Matt Kantor同意使用数据attr.编辑上面的回答

Answer 3

如果您使用的是支持它的浏览器,则可以使用CSS将其<a>转换为表格行:

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

当然,你只能将块元素放入其中<a>.你也不能将它与常规混合在一起<table>

Answer 4

如果必须使用表,可以在每个表格单元格中放置一个链接:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

并使链接填满整个单元格:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

如果您能够使用<div>s而不是表格,那么您的HTML可以更加简单,并且您不会在表格单元格之间的链接中获得"间隙":

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

这是与<div>方法一起使用的CSS :

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

Answer 5

通常的方法是将一些JavaScript分配给元素的onClick属性TR.

如果你不能使用JavaScript,那么你必须使用一个技巧:

1. 将相同的链接添加到TD同一行中的每一行(链接必须是单元格中最外层的元素).

2. 将链接转换为块元素: a { display: block; width: 100%; height: 100%; }

后者将强制链接填充整个单元格,因此单击任意位置将调用链接.

Answer 6

您不能<td>使用<a>标记包装元素,但可以通过使用onclick事件来调用函数来完成类似的功能.这里有一个例子,类似这个函数:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

并将它添加到您的表中,如下所示:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

Answer 7

来自sirwilliam的回答最适合我.我改进了Javascript,支持热键Ctrl + LeftClick(在新选项卡中打开页面).事件ctrlKey由PC使用,metaKey由Mac使用.

使用Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

例

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/