javascript - 使表行可点击

Question

我想知道使整个 tr 可点击的最佳方法是什么？

最常见(也是唯一？)的解决方案似乎是使用 JavaScript，通过使用 onclick="javascript:document.location.href('bla.htm');"(不要忘记:使用 onmouseover/onmouseout 设置正确的光标)。

虽然这可行，但遗憾的是目标 URL 在浏览器的状态栏中不可见，这与普通链接不同。

所以我就想知道有没有优化的空间？是否可以在浏览器的状态栏中显示将导航到的 URL？还是有一种非 JavaScript 方法可以使 tr 可点击？

Answer 1

如果您不想使用 javascript，您可以按照 Chris Porter 的建议将每个 td 元素的内容包装在匹配的 anchor 标记中。然后将 anchor 标签设置为 display: block 并将 height 和 line-height 设置为与 td 的高度相同。然后你应该会发现 td 的触摸是无缝的，效果是整行都是可点击的。注意 td 上的填充，这会导致可点击区域出现间隙。相反，对 anchor 标记应用填充，因为如果这样做，它将构成可点击区域的一部分。

我还喜欢通过在 tr:hover 上应用不同的背景颜色来将行设置为具有高亮效果。

例子

对于最新的 Bootstrap(版本 3.0.2)，这里有一些快速的 CSS 来展示如何做到这一点:

table.row-clickable tbody tr td {
    padding: 0;
}

table.row-clickable tbody tr td a {
    display: block;
    padding: 8px;
}

这是一个示例表:

<table class="table table-hover row-clickable">
    <tbody>
        <tr>
            <td><a href="#">Column 1</a></td>
            <td><a href="#">Column 2</a></td>
            <td><a href="#">Column 3</a></td>
        </tr>
    </tbody>
</table>

这是 an example展示这一点。