作者注：I：

Question

我正在使用Bootstrap，以下操作不起作用：

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

Answer 1

作者注：I：

请查看下面的其他答案，尤其是那些不使用jquery的答案。

作者注2：

保留后代，但肯定是2019年错误的方法。（2017年甚至糟糕）

你正在使用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 上使用类的好处是可以将解决方案应用于多行：

<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>和<tbody>之间添加<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; 
}

Example jsFiddle here.

除非您使用JavaScript，否则这可能与您获得它一样最佳。

Answer 4

可以使用链接表格行，但不能使用标准<table>元素。您可以使用display: table样式属性来执行此操作。 Here和here是展示的一些小问题。

这段代码可以解决问题：

.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"。 Find out more at the guide here.

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

使用标准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>

您可以通过不同的方式定义包含块，例如将transform设置为不为空（如上例所示）。

有关更多信息，请参见stretched-link的{{3}}。

Answer 7

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

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-target="a.mainlink"中所示，可以通过将.rowlink-skip类添加到<td>来排除单元格。

通过JavaScript

通过javascript调用输入掩码：

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

Answer 8

有一种很好的方法可以在<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>标记作为最后一个元素，否则它将尝试占用第一个<td>单元格的空间。

PPS：现在您的整行都是可点击的，您也可以使用此链接在新标签页中打开（Ctrl / CMD +点击）

Answer 9

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

Answer 10

这是简单的解决方案。

ptr

Answer 11

这是通过在表行上放置透明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 12

另一个选项使用<a>，CSS位置和一些jQuery或JS ：

HTML：

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS：

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

然后你需要给出一个宽度，例如使用jQuery：

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

Answer 13

此代码将使您的整个表格可以点击。单击此示例中的链接将在警告对话框中显示该链接，而不是在链接之后。

HTML：

以上示例背后的HTML：

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

CSS：

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

最后，让魔术发生的jQuery发生了：

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

它的作用是单击一行时，搜索属于锚点的href。如果找到一个，则窗口的位置设置为该href。

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

您可以将按钮角色添加到表格行，而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 16

我更喜欢使用onclick=""属性，因为它对于新手这样的新手来说易于使用和理解

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

Answer 17

以下文章介绍了如何在2020年实现这一目标：https://www.robertcooper.me/table-row-links

本文介绍了3种可能的解决方案：

使用JavaScript。
用anchorm元素包装所有表单元格。
使用<div>元素代替本机HTML表格元素，以便将表行作为<a>元素。

本文深入介绍了如何实现每个解决方案（带有指向CodePens的链接），还考虑了一些极端情况，例如如何处理要在表单元格内添加链接（嵌套{{1} }元素不是有效的HTML，因此您需要解决该问题。

正如@gameliela指出的那样，可能还应该尝试找到一种不将整个行都链接的方法，因为这样做会简化很多事情。不过，我确实认为，将整个表格行都可单击作为链接是一种很好的用户体验，因为用户可以方便地单击表格上的任何位置以导航到相应的页面。

Answer 18

接受的答案很棒，但如果你不想在每个tr上重复网址，我会提出一个小的选择。所以你把url或href放在table data-url而不是tr。

中

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

这也很好，因为您不需要将click数据属性添加到每个tr中。另一个好处是我们没有使用类来触发点击，因为类应该只用于样式。

Answer 19

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

<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        @include('partials._top_nav')
        @include('partials._sidebar') 
    </nav>
    <!-- /Navigation -->
    <div id="page-wrapper">
        <div class="container-fluid">
             @yield('content')
        </div>
        <!-- /.container-fluid -->
    </div>
</div>

完成工作here

Answer 20

我花了很多时间来解决这个问题。

有3种方法：

使用JavaScript。明显的缺点：无法在本地打开新选项卡，并且将鼠标悬停在行上时，状态栏上将不会像常规链接一样显示任何指示。可访问性也是一个问题。
仅使用HTML / CSS。这意味着将<a>嵌套在每个<td>下。像this fiddle这样的简单方法是行不通的-因为可点击的表面不一定对于每列都是相等的。这是一个严重的用户体验问题。另外，如果您需要在该行上使用<button>，则将其嵌套在<a>标签下是无效的HTML（尽管浏览器可以接受）。

我发现了3种其他方式来实现这种方法。首先可以，其他两个都不是很好。

a）看一下this example：
```
tr {
  height: 0;
}

td {
  height: 0;
  padding: 0;
}

/* A hack to overcome differences between Chrome and Firefox */
@-moz-document url-prefix() {
  td {
    height: 100%;
  }
}

a {
  display: block;
  height: 100%;
}
```
它可以工作，但是由于Chrome和Firefox之间的不一致，因此需要针对特定浏览器的破解来克服差异。此外，Chrome始终会将单元格内容对齐到顶部，这可能会导致长文本出现问题，尤其是在涉及行高变化时。

b）将<td>设置为{ display: contents; }。这会导致另外两个问题：

b1。如果其他人尝试直接设置<td>标签的样式，例如将其设置为{ width: 20px; }，则需要以某种方式将该样式传递给<a>标签。我们需要一些魔术来做到这一点，可能比Javascript替代方案中的魔术更多。

b2。 { display: contents; }仍处于实验阶段；特别是Edge不支持。

c）将<td>设置为{ height: --some-fixed-value; }。这还不够灵活。
我建议认真考虑的最后一种方法是根本不使用可点击的行。可点击的行并不是很棒的UX体验：要在视觉上将它们标记为可点击并不容易，并且当行中的多个部分（例如按钮）都可点击时，会带来挑战。因此，可行的替代方案是仅在第一列上显示一个<a>标签，并显示为常规链接，并赋予其导航整行的作用。

Answer 21

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

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

#define MAX_SIZE 32 

typedef struct T {
     int total_data;
     D *data;
} T;

typedef struct D {
     int type;
     char value[MAX_SIZE];  
} D;

Answer 22

你可以给行一个id，例如

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

然后使用jquery说出类似的内容：

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

Answer 23

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

尽管这里的主要解决方案很棒，但是我的解决方案消除了对类的需求。您所需要做的就是添加带有URL的data-href属性。

Answer 24

这是另一种方式......

HTML：

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

jQuery：

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

Answer 25

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

用网址tabindex="0"替换＃，可以使任何元素成为焦点

Answer 26

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

<div>

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

</div>

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

26 个答案:

作者注：I：

作者注2：

另一个选项

注意

Jasny Bootstrap

用法

通过数据属性

通过JavaScript