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

本文翻译自：how to make a whole row in a table clickable as a link?

I'm using Bootstrap and the following doesn't work: 我正在使用Bootstrap，但以下操作无效：

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

---

#1楼

参考：https://stackoom.com/question/19wvl/如何使表格中的整行都可以单击为链接

---

#2楼

You can't do that. 你不能那样做。 It is invalid HTML. 这是无效的HTML。 You can't put a <a> in between a <tbody> and a <tr> . 您不能在<tbody>和<tr>之间放置<a> 。 Try this instead: 尝试以下方法：

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

When you work up to it, you'd want to use JavaScript to assign the click handler outside of the HTML. 完成此工作后，您想使用JavaScript在HTML之外分配点击处理程序。

---

#3楼

You could give the row an id, eg 您可以为该行指定一个ID，例如

<tr id="special"> ... </tr>

and then use jquery to say something like: 然后使用jquery进行类似以下操作：

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

---

#4楼

You could include an anchor inside every <td> , like so: 您可以在每个<td>包含一个锚点，如下所示：

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

You could then use display:block; 然后可以使用display:block; on the anchors to make the full row clickable. 在锚点上以使整行都可点击

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

Example jsFiddle here. 此处的示例jsFiddle。

This is probably about as optimum as you're going to get it unless you resort to JavaScript. 除非您使用JavaScript，否则这可能与获得最佳效果差不多。

---

#5楼

Why should we don't use "div" tags.... 为什么我们不使用“ div”标签呢？

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>

---

#6楼

Author's note I: 作者注一：

Please look at other answers below, especially ones that do not use jquery. 请查看下面的其他答案，尤其是那些不使用jquery的答案。

Author's note II: 作者注二：

Preserved for posterity but surely the wrong approach in 2019. (Was even bad in 2017) 保留后代，但肯定在2019年使用错误的方法。（在2017年甚至很糟糕）

You are using Bootstrap which means you are using jQuery :^), so one way to do it is: 您正在使用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");
    });
});

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. 当然，您不必使用href或切换位置，您可以在点击处理程序函数中执行任何操作。 Read up on jQuery and how to write handlers; 阅读jQuery以及如何编写处理程序；

Advantage of using a class over id is that you can apply the solution to multiple rows: 使用类而不是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>

and your code base doesn't change. 并且您的代码库不会改变。 The same handler would take care of all the rows. 相同的处理程序将处理所有行。

Another option 另外一个选项

You can use Bootstrap jQuery callbacks like this (in a document.ready callback): 您可以这样使用Bootstrap jQuery回调（在document.ready回调中）：

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

This has the advantage of not being reset upon table sorting (which happens with the other option). 这样做的好处是不会在表排序时重置（这与其他选项一起发生）。

---

Note 注意

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead. 由于已发布该window.document.location已过时（或至少已弃用），请改用window.location 。