将整个表格行变成链接的最标准和兼容的方法是什么？

发布于 2024-09-02 00:11:10 字数 628 浏览 9 评论 0原文

显然，您不能只用标签包围标签就到此为止了；这是无效的，甚至不起作用。我见过 JavaScript 的使用，但是不支持 JavaScript 的浏览器会发生什么情况呢？ 将整个表格行变成链接的最佳方式是什么？

编辑：根据Lerxst的要求，这里是一个包含一些内容的表格示例行：

<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>

原文

Obviously you can't just surround the <tr> tag with an <a> tag and call it a day; this is invalid and doesn't even work. I have seen JavaScript used, but then what happens to browsers that don't support JavaScript? What is the best way to make an entire table row <tr> into a link?

Edit: At the request of Lerxst, here is an example of a table with some rows:

<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻的味道 2024-09-09 00:11:10

我的偏好是将链接放在最符合逻辑的单元格中（可能是名称），然后添加一个事件处理程序：

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

非 JS 客户端仍然可以使用常规链接。

更有效的是，将事件处理程序附加到表并使用事件对象通过单击查找元素，然后爬上父级树直到它到达一行。这可能最好通过 YUI 或 jQuery 等库来实现。

My preference would be to put a link in the most logical cell for it (probably the name), then add an event handler along the lines of:

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

Non-JS clients would still be able to use the regular link.

More efficiently, attach the event handler to the table and use the event object to find the element with the click and then climb up the tree of parents until it hit a row. This is probably best achieved with a library such as YUI or jQuery.

回复收藏 0 原文

萌︼了一个春 2024-09-09 00:11:10

如果没有 Javascript 支持，你根本做不到。链接是链接，表格行是表格行（即是，< tr> 是）。表行和大多数其他标记元素没有“自然”的类似链接的行为。您能做的最好的事情就是在内容周围使用标签填充所有表格单元格。 编辑：请注意，您需要调整样式，以便标记的布局使其完全填充表格单元格；对于初学者来说，也许可以让它们 display: block 。

或者你可以使用 JavaScript。

回复收藏 0 原文

谜泪 2024-09-09 00:11:10

如果您愿意放弃 TABLE，下面的解决方案是最简单的，并且不需要 JavaScript：

<style type="text/css">
.table {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
}
 .table .row {
    display:table-row;
}
 .table .cell {
    display:table-cell;
}    
</style>

<section class="table">
  <a class="row" href="#">
    <div class="cell">
      A
    </div>
    <div class="cell">
      B
    </div>
    <div class="cell">
      C
    </div>
  </a>
</section>

If you are willing to forego the TABLE, the below solution is the most simple and doesn't require JavaScript:

<style type="text/css">
.table {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
}
 .table .row {
    display:table-row;
}
 .table .cell {
    display:table-cell;
}    
</style>

<section class="table">
  <a class="row" href="#">
    <div class="cell">
      A
    </div>
    <div class="cell">
      B
    </div>
    <div class="cell">
      C
    </div>
  </a>
</section>

回复收藏 0 原文

青萝楚歌 2024-09-09 00:11:10

LINK

几乎就是你使行看起来像一个链接，通过让 CSS 更改颜色来表示链接，并在鼠标悬停和单击事件时创建反应并重定向到适当的更改，该链接说明了如何执行

可以添加后备的操作如果 JS 不可用，则指向代码的标记链接，这样没有 JS 的人仍然可以使用该行中包含的链接。所以你有一个后备选项

回复收藏 0 原文

帅冕 2024-09-09 00:11:10

<html><head>
    <style type="text/css">
    table a { display: block; }
    table a:hover { background: yellow; }
    .name { display: block; float: left; width: 300px; }
    </style>

</head><body>
        <table>
        <thead>
            <tr><th class="name">Name</th><th>Number of widgets</th></tr>
        </thead>
        <tbody>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
        </tbody>
    </table>

</body></html>

<html><head>
    <style type="text/css">
    table a { display: block; }
    table a:hover { background: yellow; }
    .name { display: block; float: left; width: 300px; }
    </style>

</head><body>
        <table>
        <thead>
            <tr><th class="name">Name</th><th>Number of widgets</th></tr>
        </thead>
        <tbody>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
        </tbody>
    </table>

</body></html>

回复收藏 0 原文

~没有更多了~