質問

Bootstrapを使っているのですが、以下がうまくいきません。

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

解決方法は？

作者コメント I:

以下の他の回答、特にjqueryを使用していないものをご覧ください。

作者のコメント II:

後世に残すために保存されているが、きっと いけない 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 とハンドラの書き方について説明します。

を使用する利点は クラス オーバー イド は、複数の行に解決策を適用できることです。

<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 の代わりに