如何使一个表中的整行可点击作为链接？
我正在使用Bootstrap，以下不起作用：
<tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td> </tr> </a> </tbody> 你正在使用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上使用类的好处是可以将解决scheme应用于多行：
<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>
并且您的代码库不会更改。 相同的处理程序将照顾所有的行。
另外一个select
您可以像这样使用Bootstrap jQuerycallback（在document.readycallback中）：
$("#container").on('click-row.bs.table', function (e, row, $element) { window.location = $element.data('href'); });
这具有在表格分类时不会被重置的优点（这发生在另一个选项上）。
注意
由于这是张贴的window.document.location是过时的（或至less不推荐）使用window.location来代替。
你不能这样做。 这是无效的HTML。 你不能把<a>放在<tbody>和<tr> 。 试试这个：
<tr onclick="window.location='#';"> ... </tr>
当你处理它时，你会想要使用JavaScript来指定HTML以外的点击处理程序。
你可以在每个<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; }
例子js在这里find。
除非你诉诸JavaScript，否则这可能是最好的。
是的，但不是标准的<table>元素。 如果您使用display: table style属性，则可以。 这里和这里是一些小提琴演示。
这个代码应该做的伎俩：
<div style="display: table"> <div style="display: table-row"> <div style="display: table-cell"> 1.1 </div> <div style="display: table-cell"> 1.2 </div> <div style="display: table-cell"> 1.3 </div> </div> <a style="display: table-row" href="#"> <div style="display: table-cell"> 2.1 </div> <div style="display: table-cell"> 2.2 </div> <div style="display: table-cell"> 2.3 </div> </a> </div>
你可以在tr中使用onclick javascript方法，并使其可以点击，如果你需要build立你的链接，由于一些细节，你可以在javascript中声明一个函数，并在onclick中调用它，传递一些值。
你可以使用这个引导组件：
http://jasny.github.io/bootstrap/javascript/#rowlink
Jasny Bootstrap
您最喜爱的前端框架缺less的组件。
<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调用input掩码：
$('tbody.rowlink').rowlink()
另一种select使用<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'); });
这是通过在表格行上放置一个透明的A元素来实现的。 优点是：
- 是一个真正的链接元素：hover改变指针，在状态栏显示目标链接，可以键盘导航，可以在新标签或窗口中打开，URL可以复制等
- 该表看起来相同，没有添加的链接
- 表代码本身没有变化
缺点：
- A元素的大小必须在脚本中进行设置，无论是在创build时还是在对所覆盖行的大小进行任何更改之后（否则可以根本不使用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) ; });
如果使用了许多填充和边距，宽度和高度设置可能会非常棘手，但是通常几个像素closures都不应该关系。
现场演示在这里： http : //jsfiddle.net/qo0dx0oo/ （在Firefox中工作，但不是IE或Chrome，那里的链接定位错误）
固定的Chrome和IE浏览器（仍然在FF工作）： http : //jsfiddle.net/qo0dx0oo/2/
有一个很好的方法可以用<a> <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'; }
PS：注意这里的诀窍是把<a>标签作为最后一个元素，否则它会尝试取第一个<td>单元格的空间。
PPS：现在你的整行将是可点击的，你也可以使用这个链接在新标签中打开（Ctrl / CMD +单击）
下面的代码将使您的整个表可点击。 点击这个例子中的链接将显示一个警告对话框中的链接，而不是链接。
HTML：
这里是上面的例子中的HTML：
<table id="example"> <tr> <th> </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; } }); });
它所做的是当单击一行时，search属于一个锚点的href。 如果find一个，窗口的位置设置为该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;}
你可以给该行一个ID，例如
<tr id="special"> ... </tr>
然后使用jquery来说一些像这样的：
$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})
您可以将buttonangular色添加到表格行，并且引导程序将更改光标而无需任何css更改。 我决定使用这个angular色来轻松地使用很less的代码对任何行进行点击。
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"); }); });
您可以应用相同的原则将buttonangular色添加到任何标签。
这是另一种方式
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"; }); });
一个非常简单的选项（也适用于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>
在这里工作
为什么我们不应该使用“div”标签….
<div> <a href="" > <div> Table row of content here.. </div> </a> </div>
