我无法将表格行设置为指向某些内容的链接。我只能使用CSS和HTML。我尝试了从div到另一行的不同操作，但仍然无法使它起作用。

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

• 使用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

我给自己做了一个自定义的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同意使用数据属性。上面编辑的答案

如果您使用的浏览器支持它，则可以使用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>

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

<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 */
}

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

如果您不能使用JavaScript，则必须使用技巧：

1. 将相同的链接添加到TD同一行中的每一行（链接必须是单元格中最外面的元素）。

2. 将链接变成块元素： a { display: block; width: 100%; height: 100%; }

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

您不能<td>使用<a>标签来包装元素，但是可以通过使用onclick事件来调用函数来完成类似的功能。在此处找到一个示例，类似于此函数：

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

并将其添加到您的表中，如下所示：

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

sirwilliam的回答最适合我。我通过支持热键Ctrl + LeftClick（在新标签页中打开页面）改进了Javascript。事件ctrlKey由PC使用，metaKeyMac使用。

Java脚本

$('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/

我知道这个问题已经回答了，但是我仍然不喜欢此页面上的任何解决方案。对于使用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 现在，您可以<tr>在HTML内的任何元素上使用它

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

当我想模拟一个<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上时，所有行（以及此链接）都具有悬停样式，并且他看不到有多个链接。

希望可以帮助某人。

小提琴这里

这省去了您在tr中重复链接的麻烦-只需将其从第一个a中删除即可。

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

//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）可单击的唯一方法。

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

然后，您不应该使用表格。

阅读此线程和其他一些线程后，我在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像div一样具有链接的行为display: table;，并且它们不能通过键盘选择或具有状态文本。编辑：我通过设置onkeydown，role和tabIndex使键盘导航起作用，如果只需要鼠标，则可以删除该部分。但是，它们不会在悬停状态栏中显示URL。

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

我有另一种方式。特别是如果您需要使用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";
    });
});

Set Variable在SESSIONS中设置变量，您要阅读的页面可以对其执行操作。

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

谢谢你 您可以通过向以下行分配CSS类来更改悬停图标：

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

CSS看起来像：

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

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

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

这是您要的吗？