HTML如何使表格中的整行可作为链接点击？

我正在使用引导程序，但以下内容不起作用：

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

分割线

网友回答：

作者注一：

请查看下面的其他答案，尤其是不使用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.locationwindow.location

分割线

网友回答：

你不能这么做。它是无效的 HTML。您不能在 a 和 a 之间放置 .试试这个：<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; 
}

示例 jsFiddle 在这里。

这可能和你将要得到它的最佳选择一样好，除非你求助于JavaScript。

模板简介：该模板名称为【HTML如何使表格中的整行可作为链接点击？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。