HTML、HTMLテーブル、Bootstrap 4でテーブルの行全体をリンクとしてクリックできるようにする方法

2024-04-02

HTML、HTMLテーブル、Bootstrap 4でテーブルの行全体をリンクとしてクリックできるようにする方法

HTMLテーブルで、行全体をクリックして別のページに遷移したい場合があります。これは、各行の詳細ページへのリンクとして役立ちます。

このチュートリアルでは、HTML、HTMLテーブル、Bootstrap 4を使用して、テーブルの行全体をリンクとしてクリックできるようにする方法を説明します。

方法:

この方法は、以下の3つのステップで構成されます。

HTMLコード:
- <tr> タグ内に a タグを記述します。
- a タグの href 属性に、遷移先のURLを指定します。
- a タグ内に、リンクテキストを記述します。
CSSコード:
- a タグにスタイルを適用します。
- display: block; を使用して、a タグをブロック要素にします。
- width: 100%; を使用して、a タグの幅をテーブル行の幅と同じにします。
Bootstrap 4 (オプション):

コード例:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブル行全体をリンクとしてクリックできるようにする</title>
    <style>
        a {
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <table class="table table-striped table-hover">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>山田 太郎</td>
            <td>30歳</td>
            <td>男性</td>
        </tr>
        <tr>
            <td>佐藤 花子</td>
            <td>25歳</td>
            <td>女性</td>
        </tr>
    </table>
</body>
</html>

実行結果:

上記のコードを実行すると、以下のようになります。

テーブルの各行全体をクリックすると、href 属性で指定されたURLに遷移します。
マウスを各行にホバーすると、背景色が変わります。

補足:

上記のコードは、Bootstrap 4を使用していない場合でも動作します。
各行のデザインを変更したい場合は、CSSコードを変更してください。

より高度な方法については、他のチュートリアルや参考資料を参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブル行全体をリンクとしてクリックできるようにする</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqkl0qKfL1htmnFWjCEpZcV5i4nBE1JEo4en3mO4L5f91Z5b2LovE" crossorigin="anonymous">
    <style>
        a {
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <table class="table table-striped table-hover">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>性別</th>
        </tr>
        <tr>
            <td><a href="https://example.com/user/1">山田 太郎</a></td>
            <td>30歳</td>
            <td>男性</td>
        </tr>
        <tr>
            <td><a href="https://example.com/user/2">佐藤 花子</a></td>
            <td>25歳</td>
            <td>女性</td>
        </tr>
    </table>
</body>
</html>

上記のコードは、Bootstrap 4を使用してテーブルの行全体をリンクとしてクリックできるようにするサンプルコードです。
href 属性で指定されたURLに遷移するには、各行の a タグをクリックします。

変更点:

以下の変更を行いました。
- Bootstrap 4 CDN を追加しました。
- table タグに table-striped クラスと table-hover クラスを追加しました。
- 各行の td タグ内に a タグを追加しました。

実行:

上記のコードをHTMLファイルに保存し、ブラウザで開きます。

テーブルの行全体をリンクとしてクリックできるようにする他の方法

JavaScriptを使用して、テーブルの各行をクリックしたときに別のページに遷移するイベントハンドラを追加できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブル行全体をリンクとしてクリックできるようにする</title>
</head>
<body>
    <table id="my-table">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>山田 太郎</td>
            <td>30歳</td>
            <td>男性</td>
        </tr>
        <tr>
            <td>佐藤 花子</td>
            <td>25歳</td>
            <td>女性</td>
        </tr>
    </table>
    <script>
        const table = document.getElementById("my-table");
        const rows = table.getElementsByTagName("tr");

        for (let i = 0; i < rows.length; i++) {
            rows[i].addEventListener("click", () => {
                // 遷移先のURL
                const url = "https://example.com/user/" + (i + 1);
                window.location.href = url;
            });
        }
    </script>
</body>
</html>

説明:

for ループを使用して、テーブルの各行を取得します。
addEventListener() メソッドを使用して、各行に click イベントハンドラを追加します。
イベントハンドラは、window.location.href プロパティを使用して、遷移先のURLにリダイレクトします。

jQueryを使用すると、JavaScriptコードをより簡潔に記述できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブル行全体をリンクとしてクリックできるようにする</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="my-table">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>山田 太郎</td>
            <td>30歳</td>
            <td>男性</td>
        </tr>
        <tr>
            <td>佐藤 花子</td>
            <td>25歳</td>
            <td>女性</td>
        </tr>
    </table>
    <script>
        $(document).ready(() => {
            $("#my-table tr").click(function() {
                // 遷移先のURL
                const url = "https://example.com/user/" + $(this).index();
                window.location.href = url;
            });
        });
    </script>
</body>
</html>