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

html HTML

GilA

2020-03-22

我正在使用Bootstrap，但以下操作无效：

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

第2571篇《如何使表格中的整行都可单击作为链接？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答

十三 2020.03.22

为什么我们不使用“ div”标签呢？

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>

凯西里 2020.03.22

您可以为该行指定一个ID，例如

<tr id="special"> ... </tr>

然后使用jquery进行类似以下操作：

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

樱AItachi 2020.03.22

前面未提及的一种解决方案是在单元格中使用单个链接，并使用一些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>

Tom十三 2020.03.22

我知道有人已经写了几乎相同的东西，但是我的方法是正确的方法（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;}

老丝 2020.03.22

您可以将按钮角色添加到表行中，并且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");
     });
});

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

梅 2020.03.22

从我的角度来看，一个非常简单的选择就是使用单击，并且更正确，因为这将视图和控制器分开了，并且您不需要对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>

例子在这里工作

泡芙Tom 2020.03.22

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

LGil 2020.03.22

链接表行是可能的，但标准<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>

Note that ARIA roles are needed to ensure proper accessibility since the standard <table> elements are not used. You may need to add additional roles like role="columnheader" if applicable. Find out more at the guide here.

樱 2020.03.22

您可以在每个中添加一个锚点<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，否则这可能与获得最佳效果差不多。

Stafan 2020.03.22

使用标准Bootstrap 4.3+如下实现-无需jQuery或任何额外的CSS类！

关键是要stretched-link在单元格中的文本上使用并定义<tr>为包含块。

<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>