☰

表の行全体をリンクとしてクリック可能にするにはどうすればいいですか? 質問する

tag-icon • tag-icon html html-table bootstrap-4
表の行全体をリンクとしてクリック可能にするにはどうすればいいですか? 質問する

Bootstrap を使用していますが、以下は機能しません。

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

ベストアンサー1

著者注 I:

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

著者注 II:

後世のために保存されていますが、2020 年には間違いなく間違ったアプローチです。(2017 年当時でも慣用的な表現ではありませんでした)

元の回答

Bootstrap を使用しているということは、jQuery を使用しているということです :^)。そのための 1 つの方法は次のとおりです。

<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、代わりに使用してください。

おすすめ記事