如何将表中的整行作为链接点击？

Question

我正在使用Bootstrap,以下不起作用:

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

Answer 1

你正在使用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或switch位置,您可以在单击处理函数中执行任何您喜欢的操作.阅读jQuery以及如何编写处理程序;

使用id over class的优点是可以将解决方案应用于多行:

<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.location内容已过时(或至少已弃用),请window.location改为使用.

Answer 2

你不能这样做.它是无效的HTML.你不能把它<a>放在a <tbody>和a 之间<tr>.试试这个:

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

当您开始使用它时,您希望使用JavaScript在HTML之外分配单击处理程序.

Answer 3

您可以在每个内部包含一个锚点<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,否则这可能就像你要获得它一样最佳.

Answer 4

是的,但没有标准<table>元素.如果使用display: table样式属性,则可以.这里和这里有一些小小的展示.

这段代码可以解决这个问题:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

请注意,由于<table>未使用标准元素,因此使用aria角色来确保正确的可访问性.您可能需要添加其他角色(role="columnheader"如果适用).请在以下指南中了解更多信息.

Answer 5

更灵活的解决方案是使用data-href属性定位任何内容.这是您可以在不同的地方轻松重用代码.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

然后在你的jQuery中,只需使用该属性定位任何元素:

jQuery(document).ready(function($) {
    $('*[data-href]').on('click', function() {
        window.location = $(this).data("href");
    });
});

别忘了给你的css打造一个风格:

[data-href] {
    cursor: pointer;
}

现在,您可以将data-href属性添加到任何元素,它将起作用.当我写这样的片段时,我喜欢它们是灵活的.如果你有一个香草js解决方案,请随意添加.

Answer 6

前面没有提到的一种解决方案是在单元格中使用单个链接，并使用一些 CSS 将这个链接扩展到单元格上：

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

Answer 7

您可以将按钮角色添加到表格行，Bootstrap 将更改光标而无需任何 css 更改。我决定使用这个角色作为一种方式，用很少的代码轻松地使任何行都可以点击。

html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

您可以应用相同的原则将按钮角色添加到任何标签。

Answer 8

这是简单的解决方案..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

Answer 9

您可以使用此引导程序组件:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

您最喜欢的前端框架缺少的组件.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

用法

通过数据属性

将类.rowlink和属性添加data-link="row"到元素<table>或<tbody>元素.对于其他选项,将名称附加到data-,因为data-target="a.mainlink"可以通过将.rowlink-skip类添加到A来排除<td>.

通过JavaScript

通过javascript调用输入掩码:

$('tbody.rowlink').rowlink()

Answer 10

有一个很好的方法从技术上做<a>标记内部<tr>,这可能在语义上不正确(可能会给你一个浏览器警告),但没有JavaScript/jQuery必要的工作:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS:注意这里的技巧是将<a>tag作为最后一个元素,否则它将尝试占用第一个<td>单元格的空间.

PPS:现在您的整行都是可点击的,您也可以使用此链接在新标签页中打开(Ctrl/CMD +点击)

Answer 11

一个非常简单的选择是使用点击，在我看来更正确，因为这将视图和控制器分开，并且您不需要硬编码 URL 或您需要通过单击完成的任何其他操作. 它也适用于 Angular ng-click。

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

在这里工作的例子

Answer 12

您可以在tr中使用onclick javascript方法并使其可单击,如果您需要构建链接,由于某些细节,您可以在javascript中声明一个函数并在onclick中调用它,传递一些值.

Answer 13

这是通过在表行上放置透明A元素的方法。优点是：

• 是真正的链接元素：悬停时更改指针，在状态栏中显示目标链接，可以通过键盘导航，可以在新选项卡或窗口中打开，可以复制URL等
• 该表的外观与未添加链接的外观相同
• 表代码本身没有变化

缺点：

• 必须在脚本中设置A元素的大小，无论是在创建时还是在对其覆盖的行大小进行任何更改之后（否则都可以完全不使用JavaScript来完成，如果还设置了表大小，则仍然可以这样做）在HTML或CSS中）

该表保持原样：

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

通过在每个第一列中插入A元素并设置所需的属性，通过jQuery JavaScript添加链接（针对每一行）：

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

如果使用许多填充和边距，则宽度和高度设置可能会比较棘手，但通常，关闭几个像素甚至都不会造成影响。

此处的现场演示：http : //jsfiddle.net/qo0dx0oo/（在Firefox中有效，但在IE或Chrome中不起作用，该链接的位置错误）

已修复，适用于Chrome和IE（在FF中也同样适用）：http : //jsfiddle.net/qo0dx0oo/2/

Answer 14

我知道有人已经写了几乎相同的内容，但是我的方法是正确的方法（div 不能是 A 的子级），而且最好使用类。

您可以使用 CSS 模仿表格并将 A 元素设置为行

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS：

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

Answer 15

Achieved using standard Bootstrap 4.3+ as follows - no jQuery nor any extra css classes needed!

The key is to use stretched-link on the text within the cell and defining <tr> as a containing block.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

You can define containing block in different ways for example setting transform to not none value (as in example above).

For more information read here's the Bootstrap documentation for stretched-link.