一个非常简单的选择是使用on-click，在我看来，这更正确，因为这分离了视图和控制器，你不需要硬编码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>

例如在这里工作

2023年的答案: 你可以在行中添加addEventListener:

var rows = document.getElementsByTagName('table')[0].rows; Array.from(rows).forEach(row => { row.addEventListener("click", function() { console.log(this.getAttribute('data-href')); // window.location.href = this.getAttribute('data-href'); }); }); body { display: flex; justify-content: center; margin-top: 20px; color: #37559d; } a { color: #5165ff; } table { border-collapse: collapse; } tr:hover { background: #f2f3ff; outline: none; cursor: pointer; } td { border: 2px solid #ccd2ff; position: relative; padding: 18px; } <table> <tbody> <tr data-href="https://www.google.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link1">Link</a> </td> </tr> <tr data-href="https://www.amazon.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link2">Link</a> </td> </tr> <tr data-href="https://www.stackoverflow.com"> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> <td> <a href="#link3">Link</a> </td> </tr> </tbody> </table>

作者注一:

请看看下面的其他答案，特别是那些不使用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回调(在文档中)。准备回调):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

这样做的好处是不会在表排序时被重置(这发生在另一个选项中)。

Note

window.document.location是过时的(或至少已弃用)使用window。位置相反。

另一种选择使用<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元素放在表行的方法。优点是:

是一个真正的链接元素:在悬停时改变指针，在状态栏中显示目标链接，可以用键盘导航，可以在新选项卡或窗口中打开，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/

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