修改

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

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

如果你不能使用JavaScript，那么你必须使用技巧：

向同一行的每个TD添加相同的链接（该链接必须是单元格中最外层的元素）。
将链接转换为块元素：a { display: block; width: 100%; height: 100%; }

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

Answer 5

如果您必须使用表格，您可以在每个表格单元格中添加一个链接：

<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>而不是表格，那么您的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 6

您不能使用<td>标记包装<a>元素，但可以使用onclick事件调用函数来完成类似的功能。找到一个例子here，类似于这个函数：

<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（在新选项卡中打开页面）。 PC使用事件ctrlKey，Mac使用metaKey。

<强>的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/

Answer 8

我知道这个问题已经回答了，但我仍然不喜欢这个页面上的任何解决方案。对于使用JQuery的人，我做了一个最终解决方案，使您能够为表行提供与<a>标记几乎相同的行为。

这是我的解决方案：

jQuery 您可以将其添加到标准的javascript文件中

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

HTML 现在，您可以在HTML中的任何<tr>元素上使用此

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

Answer 9

这样可以节省你在tr中复制链接的麻烦 - 只需将它从第一个中删除即可。

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

Answer 10

当我想要使用链接模拟<tr>但尊重html标准时，我会这样做。

HTML：

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS：

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

通过这种方式，当有人用他的鼠标在TR上时，所有行（和此链接）都会获得悬停样式，并且他看不到有多个链接。

希望可以帮助别人。

小提琴HERE

Answer 11

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

也许这些方面的东西？虽然它确实使用JS，但这是使行（tr）可点击的唯一方法。

除非您的单个单元格中有一个填充整个单元格的锚标记。

然后，你无论如何都不应该使用表格。

Answer 12

在阅读了这个帖子和其他一些内容之后，我在javascript中提出了以下解决方案：

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

要使用它，请将href放在您想要点击的tr / td / th中，如：<tr href="http://stackoverflow.com">。并确保在创建tr元素之后执行上述脚本（通过其放置或使用事件处理程序）。

~~缺点是它不会完全使TR表现为像带有display: table;的div这样的链接，并且它们不会被键盘选择或具有状态文本。~~编辑：我通过设置onkeydown，role和tabIndex来进行键盘导航工作，如果只需要鼠标，你可以删除那部分。但是，在悬停时，他们不会在状态栏中显示网址。

您可以使用“tr [href]”CSS选择器专门设置链接TR的样式。

Answer 13

我有另一种方式。特别是如果你需要使用jQuery发布数据

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

设置变量在SESSIONS中设置变量，您要访问的页面可以读取并对其进行操作。

我真的很想直接发布到窗口位置，但我认为不可能。

Answer 14

谢谢你。您可以通过将CSS类分配给行来更改悬停图标，如：

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

，CSS看起来像：

<style>
    .pointer { cursor: pointer; }
</style>

Answer 15

您可以在行中添加A标记吗？

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

这就是你问的问题吗？

html - 表格行像链接

15 个答案:

HTML

的jQuery

修改