如何使表格中的整行可单击为链接？

作者注一：

请查看下面的其他答案，尤其是不使用 jquery 的答案。

作者注二：

为后代保留，但在 2020 年肯定是错误的方法。（即使在 2017 年也不是惯用的）

原始答案

您正在使用 Bootstrap，这意味着您正在使用 jQuery :^)，因此一种方法是：

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

当然，您不必使用 href 或切换位置，您可以在点击处理函数中做任何您喜欢的事情。阅读 jQuery 以及如何编写处理程序；

使用类而不是 id 的优点是您可以将解决方案应用于多行：

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

并且您的代码库不会改变。同一个处理程序将处理所有行。

另外的选择

您可以像这样使用 Bootstrap jQuery 回调（在 document.ready 回调中）：

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

这具有在表排序时不会被重置的优点（在另一个选项中会发生）。

笔记

由于已发布 window.document.location 已过时（或至少已弃用），请改用 window.location。

---

你不能那样做。它是无效的 HTML。您不能将 <a> 放在 <tbody> 和 <tr> 之间。试试这个：

<tr onclick="window.location='#';">
   ...
</tr>

为指针视图添加样式

[data-href] { cursor: pointer; }

当您处理它时，您会希望使用 JavaScript 在 HTML 之外分配点击处理程序。

---

您可以在每个 <td> 中包含一个锚点，如下所示：

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

然后，您可以在锚点上使用 display:block; 以使整行可点击。

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Example jsFiddle here.

除非您求助于 JavaScript，否则这可能与您将获得的一样最佳。

---

可以使用链接表行，但不能使用标准 <table> 元素。您可以使用 display: table 样式属性来完成。 Here 和 here 是一些要演示的小提琴。

这段代码应该可以解决问题：

.table { 显示：表格； } .row { 显示：表行； } .cell { 显示：表格单元格；填充：10px； } .row:hover { 背景颜色：#cccccc; } .cell:hover { 背景颜色：#e5e5e5; }

请注意，由于不使用标准 <table> 元素，因此需要 ARIA 角色来确保正确的可访问性。如果适用，您可能需要添加其他角色，例如 role="columnheader"。 Find out more at the guide here.

---

使用标准 Bootstrap 4.3+ 实现如下 - 不需要 jQuery 也不需要任何额外的 css 类！

关键是在单元格内的文本上使用 stretched-link 并将 <tr> 定义为包含块。

< td>桑顿

1	Mark	Otto	@mdo
2	Jacob	@fat
3	拉里	小鸟< /td>	@twitter

您可以以不同的方式定义包含块，例如将 transform 设置为非无值（如上例所示）。

有关更多信息，请阅读此处的 stretched-link 的 Bootstrap documentation。

---

一个更灵活的解决方案是使用 data-href 属性来定位任何东西。这是您可以在不同的地方轻松重用代码。

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

然后在您的 jQuery 中，只需针对具有该属性的任何元素：

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

并且不要忘记为你的 CSS 设置样式：

[data-href] {
    cursor: pointer;
}

现在您可以将 data-href 属性添加到任何元素，它会起作用。当我写这样的片段时，我喜欢它们是灵活的。如果你有，请随意添加一个香草 js 解决方案。

---

这是简单的解决方案..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

---

前面没有提到的一种解决方案是使用单元格中的单个链接和一些 CSS 将此链接扩展到单元格：

表格 { 边框：1px 实心；宽度：400px；溢出：隐藏； } tr:hover { 背景：灰色； } tr td { 边框：1px 实心； } tr td:first-child { 位置:相对; } a:之前{内容：'';位置：绝对；左：0；顶部：0；底部：0；显示：块；宽度：400px； }

第一栏	第二栏	第三栏
第一栏	第二栏	第三栏

---

您可以使用此引导组件：

http://jasny.github.io/bootstrap/javascript/#rowlink

贾斯尼引导

您最喜欢的前端框架缺少的组件。

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

用法

通过数据属性

将类 .rowlink 和属性 data-link="row" 添加到 <table> 或 <tbody> 元素。对于其他选项，将名称附加到 data-，如 data-target="a.mainlink" 可以通过将 .rowlink-skip 类添加到 <td> 来排除单元格。

通过 JavaScript

通过 javascript 调用输入掩码：

$('tbody.rowlink').rowlink()

---

您可以将按钮角色添加到表格行，Bootstrap 将更改光标而无需任何 css 更改。我决定使用该角色作为一种使用很少的代码轻松使任何行可点击的方法。

html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

您可以应用相同的原则将按钮角色添加到任何标签。

---

有一个很好的方法可以在技术上使用 <tr> 中的 <a> 标记，这可能在语义上不正确（可能会给您一个浏览器警告），但不需要 JavaScript/jQuery：

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS：注意这里的技巧是将 <a> 标签作为最后一个元素，否则它将尝试占用第一个 <td> 单元格的空间。

PPS：现在您的整行都可以点击，您也可以使用此链接在新选项卡中打开（Ctrl/CMD+点击）

---

在我看来，一个非常简单的选择就是使用点击，而且更正确，因为这将视图和控制器分开，并且您不需要硬编码 URL 或您需要通过点击完成的任何其他操作.它也适用于 Angular ng-click。

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

示例工作 here

---

您可以在 tr 中使用 onclick javascript 方法并使其可点击，如果由于某些细节需要构建链接，您可以在 javascript 中声明一个函数并在 onclick 中调用它，并传递一些值。

---

这是一种在表格行上放置透明 A 元素的方法。优点是：

是一个真正的链接元素：悬停改变指针，在状态栏中显示目标链接，可以键盘导航，可以在新选项卡或窗口中打开，可以复制 URL 等

该表看起来与未添加链接时相同

表代码本身没有变化

缺点：

元素的大小必须在脚本中设置，无论是在创建时还是在对其覆盖的行的大小进行任何更改之后（否则它可以完全不使用 JavaScript 来完成，如果还设置了表大小，这仍然是可能的在 HTML 或 CSS 中）

表格保持原样：

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

通过 jQuery JavaScript 添加链接（为每一行），方法是在第一列中插入一个 A 元素并设置所需的属性：

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

如果使用了许多填充和边距，宽度和高度设置可能会很棘手，但一般来说，几个像素的偏差甚至都无关紧要。

现场演示：http://jsfiddle.net/qo0dx0oo/（适用于 Firefox，但不适用于 IE 或 Chrome，链接位置错误）

已为 Chrome 和 IE 修复（在 FF 中仍然有效）：http://jsfiddle.net/qo0dx0oo/2/

---

下面的代码将使您的整个表格可点击。单击此示例中的链接将在警报对话框中显示该链接，而不是跟随该链接。

的HTML：

这是上面示例背后的 HTML：

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

和CSS：

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

最后是让魔术发生的 jQuery：

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

它的作用是当单击一行时，会搜索属于锚点的 href。如果找到，则窗口的位置设置为该 href。

---

我知道有人已经写了几乎相同的内容，但是我的方式是正确的方式（div 不能是 A 的子级），而且最好使用类。

您可以使用 CSS 模仿表格并将 A 元素作为行

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS：

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

---

我更喜欢使用 onclick="" 属性，因为它对于新手来说很容易使用和理解

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

---

这篇文章解释了如何在 2020 年做到这一点：https://www.robertcooper.me/table-row-links

文章解释了 3 种可能的解决方案：

使用 JavaScript。用锚元素包裹所有表格单元格。使用