使表行可单击

Question

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

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

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

所以我想知道是否有任何优化空间？是否可以在浏览器的状态栏中显示将导航到的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>

以下an example显示了这一点。

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-command应如下所示：

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

并且没有必要对游标执行任何关于游标的操作，因为只有当鼠标悬停元素时，游标属性才有效：

style="cursor:pointer;"

Answer 5

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

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

Answer 6

幸运或不幸的是，大多数现代浏览器都不允许您控制状态栏（由于欺诈意图，它可能在当天受欢迎）。

您最好的选择是标题属性或javascript tooltip。

Answer 7

如果你的桌子里面没有链接，那么下面的技巧就可以了。

将整个表放入链接并更改onmouseover事件行中链接的href属性。

演示代码：

<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
    <tr onMouseOver="setLink(this);"><td>first row</td></tr>
    <tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a> 

Answer 8

我意识到这是一个老线程，在Alice的回答中有一个完全合法的解决方案。然而，还有一种方法可以在没有javascript的情况下执行此操作而无需复制链接*列数并保持标记/ CSS有效。我花了一段时间才弄清楚，所以我想我会把它发布在其他人身上，就像我一样，最终也会在这个帖子上结束。

将链接放在第一列：

<table class="search_results">
    <tr>
        <td><a href="#">Some text</a></td>
        <td>more text</td>
        <td>more text</td>
    </tr>
</table>

这是完美的标记，因此您唯一真正的问题是让该链接跨越表格的宽度。我使用非常标准的CSS这样做：

table.search_results a {position:absolute;display:block;width:98%;}

将宽度更改为您想要的任何宽度，原则上您已完成并拂去灰尘。所以这一切都相对简单，但是如果你像我一样有流畅/响应式布局，并且你的链接上还有一些标准样式加上你桌子上的一些填充，你将需要这些规则（从上面复制必要的并添加额外）。

table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

解释： 第一个规则仅删除我第一个td上的所有填充。默认情况下，我的td上的填充是.5em。 第二个规则在链接上添加相同的填充，否则最终会出现未对齐的单元格内容。它还纠正了我的一些标准样式，以确保列看起来都一样。您也可以通过其他方式执行此操作（将链接样式添加到您的td）。 使用最后两条规则，我摆脱了链接上的默认悬停效果，然后将它放在tr上，用于任何具有正确类的表。

这适用于我关心的浏览器，但你当然应该在你关心的人身上进行测试:)希望我能用这篇文章帮助你节省一些时间！

Answer 9

这是一个黑客攻击，但您可以将其添加到tr：

onmouseover="window.status='http://bla.com/bla.htm'" 

不要忘记设置假链接的样式：

tr.clickable {
    cursor: hand; 
    cursor: pointer;
}

Answer 10

您也可以尝试在href中包装行的单元格的内容，并使用CSS将href高度/宽度推送到每个单元格的内部边界。该行本身不可点击（除非您向该行添加了额外的html），但该行的大部分内容空间将像普通链接（光标，状态栏等）。我不记得我之前是怎么做到这一点的，但是我还是合理地成功了。

编辑：评论要求提供更多详细信息，其他用户的后续帖子涵盖了这些评论，但在我进一步研究此建议并进行测试之前，我没有意识到这一点。

如果将“display：block”CSS样式标记添加到要单击的单元格中的锚点对象，则会使整个单元格（减去任何填充）像按钮一样。光标正确显示，并预览状态栏中的链接目标。这一切都是用零javascript完成的。祝你好运。

Answer 11

我有同样的问题，我只使用CSS解决了它。我认为这对我来说是最好的解决方案，因为我也在JSF中使用它。

只需将样式类分配给表格，你就可以了....

这就是：

CSS：

.myDataTable {
    background: 444;
    width: 100%;
}

.myDataTable thead tr {
    background-image: url('../img/tableHeader.jpg');
}

.myDataTable thead tr th {
    height: 28px;
    font-size: 14px;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable thead tr th img {
    padding-right: 5px;
    padding-top: 1px;
}

.myDataTable thead tr td {
    height: 15px;
    font-size: 11px;
    font-weight: bold;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable tbody {
    background: #f2f5f9;
}

.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
    background: #e2ebf4;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
    background: #f7faff;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:hover td {
    background-color: #e7e7e7;
}

.myDataTable tbody tr td {
    height: 14px;
    padding-left: 5px;
    font-size: 12px;
}

.myDataTable tbody tr td a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: block;
}

.myDataTable thead tr th a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: inline;
}

您的表结构应为：

<table class="myDataTable">
 <thead>
  <tr>
   <th>Heading 1</th>
   <th>Heading 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="#">Data    1 </a></td>
   <td><a href="#">Data    2 </a></td>
  </tr>
 </tbody>
</table>

Answer 12

如果您的目标浏览器都支持CSS Table display styles，则可以使用Javascript将<a>标记中的每一行换行设置为<tbody>。

这是使用jQuery实现它的一些JS代码：(jsfiddle)

$(function() {
  $('.table-linked').each(function() {
    var table, tbody;
    table = this;
    tbody = $('tbody', this);
    tbody.children().each(function() {
      var href, row;
      row = $(this);
      href = row.attr('data-href');
      $('<a href="' + href + '" style="display: table-row-group" />').append(row).appendTo(table);
    });
    tbody.remove();
  });
});

此代码将转换如下所示的表：

<table class="table-linked">
    <tbody>
        <tr data-href="/a"><td>a</td><td>1</td></tr>
        <tr data-href="/b"><td>b</td><td>2</td></tr>
    </tbody>
</table>

在浏览器中进入这个DOM结构：

<table>
    <a href="/a" style="display: table-row-group">
        <tr><td>a</td><td>1</td></tr>
    </a>
    <a href="/b" style="display: table-row-group">
        <tr><td>b</td><td>1</td></tr>
    </a>
</table>

浏览器似乎无法将此结构解析为HTML代码（不用说它不会验证），它需要使用JS构建

Answer 13

Marko Dugonjic在他的博客maratz.com中解释了如何使用Javascript检测表行索引。在他的示例中，当您将鼠标悬停在一行中的任何单元格上时，整个行都会突出显示。

参见示例， http://webdesign.maratz.com/lab/row_index/

和他的文章， http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/

通过更改，您可以通过执行onclick操作来进一步调整。

Answer 14

如果您已经依赖javascript进行点击，那么您还可以使用javascript在状态区域中显示网址，更改光标或执行其他操作以使其看起来更像链接。当然，浏览器可能会忽略设置状态区域的代码。