使表行可单击

Question

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

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

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

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

Answer 1

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

我还想通过在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>

这是一个显示此操作的示例.

Answer 2

使用jQuery,您可以按照以下方式执行某些操作:

$('tr').click(function () {
  $(this).toggleClass('highlight_row');
}); 

然后在CSS文件中添加highlight_row,该行将其类更改为highlight_row.您可以在该行中换出您想要做的任何事情(以及更改$('tr')以适合您的特定行.

Answer 3

我发现这个解决方案效果很好:

$(document).ready(function() {
    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");

        if(href) {
            window.location = href;
        }
    });
});

只是不要忘记将光标设置为指针 tr:hover

#table tr:hover {cursor: pointer;}

资料来源:http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

Answer 4

"

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

"

onclick命令应该如下所示:

onclick="window.location.href='bla.html';"

并且没有必要对游标执行任何onmouseover/-out,因为只有当鼠标悬停元素时,游标属性才有效:

style="cursor:pointer;"

Answer 5

另一种方法是实际链接每个单元格的内容.如有必要,您可以更改样式,使它们看起来不像传统链接.

请注意,您尝试执行的操作确实会破坏直观的用户体验.需要明确的是,点击一行会有所作为.我通常喜欢在每行的边缘放一个图标(放大镜等),这些图标会钻入新的页面.

Answer 6

幸运或不幸的是，由于欺诈意图，大多数现代浏览器不再让您控制状态栏（这在当时是可能且流行的）。

更好的选择是 title 属性或javascript tooltip。