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

<div>


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


</div>

作者注一:

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

作者注二:

为子孙后代保留，但肯定是2020年的错误的方法。(早在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或切换位置，你可以在点击处理函数中做任何你喜欢的事情。阅读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代替。

还有另一种方法……

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


});


});

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

可以使用链接的表行，但不能使用标准的<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"(如果适用的话)。# EYZ2

另一个选项使用<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');
});

你可以使用这个bootstrap组件:

< a href = " http://jasny.github。io /引导/ javascript / # rowlink noreferrer“rel = > http://jasny.github.io/bootstrap/javascript/ rowlink < / >

Jasny引导

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

<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类添加到<td>类中来排除单元格。

通过JavaScript

通过javascript调用输入掩码:

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

下面是一种将透明的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>

添加链接(为每一行)通过jQuery JavaScript插入一个A元素到每个第一列，并设置所需的属性:

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

下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接，而不是按照该链接进行操作。

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。

我知道有人已经写了差不多一样的，但我的方式是正确的方式(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;}

您可以将按钮角色添加到表行中，Bootstrap将在不更改css的情况下更改游标。我决定使用这个角色作为一种方法，用很少的代码轻松地使任何行都可以单击。

超文本标记语言

<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");
});
});

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

有一种很好的方法可以在<tr>内使用<a>标记，这可能在语义上是不正确的(可能会给你一个浏览器警告)，但不需要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';
}

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

PPS:现在你的整个行将是可点击的，你可以使用这个链接在新选项卡中打开(Ctrl/CMD+单击)

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


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

示例工作在这里

<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);
});
});

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

一个更灵活的解决方案是使用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解决方案，请随意添加。

<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属性。

我更喜欢使用onclick=""属性，因为它很容易使用和理解新手喜欢

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

使用标准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设置为非none值(如上例所示)。

要了解更多信息，请阅读引导文件和stretched-link。

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

有3种方法:

1. 使用JavaScript。明显的缺点是:不可能在本地打开一个新选项卡，当鼠标悬停在一行上时，状态栏上没有像常规链接那样的指示。可访问性也是一个问题。

2. 只使用HTML/CSS。这意味着将<a>嵌套在每个<td>下面。像这小提琴这样的简单方法是行不通的——因为可点击的表面不一定对每一列都相等。这是一个严重的用户体验问题。此外，如果您需要一行上的<button>，那么将它嵌套在<a>标记下是无效的HTML(尽管浏览器可以接受)。

   我发现了另外3种实现这种方法的方法。第一个还可以，其他两个不太好。

   a)看看这个例子:

   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; }。

3. 最后一种方法，我建议大家认真考虑是完全不使用可点击的行。可点击的行并不是一个很好的UX体验:在视觉上将它们标记为可点击并不容易，当行中有多个部分可点击时，就会带来挑战，比如按钮。因此，可行的替代方案是只在第一列上使用<a>标记，将其显示为常规链接，并赋予其导航整行的角色。

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

这里有一个简单的解决办法。

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

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

将#替换为url， tabindex="0"使任何元素都可聚焦

这里有一篇文章解释了如何在2020年做到这一点:https://www.robertcooper.me/table-row-links

这篇文章解释了3种可能的解决方案:

1. 使用JavaScript。
2. 用锚定元素包装所有表单元格。
3. 使用<div>元素代替原生HTML表格元素，以便将表格行作为<a>元素。

本文深入讨论了如何实现每个解决方案(使用到codedependency的链接)，还考虑了一些边缘情况，例如如何处理希望在表单元格中添加链接的情况(嵌套的<a>元素不是有效的HTML，因此需要解决这个问题)。

正如@gameliela所指出的，找到一种不将整行作为链接的方法也是值得的，因为这将简化许多事情。然而，我确实认为，将整个表行作为一个链接来点击是一种很好的用户体验，因为用户可以方便地单击表上的任何位置来导航到相应的页面。

这里有一个通用的方法。定义这个css:

// css
td a.linker {
color:#212529;
display: block;
padding: 16px;
text-decoration: none;
}

然后把这个放在每个td里:

<td>
<a class="linker" href="www.google.com">
Cell content goes here
</a>
</td>