jqueryでテーブルから１行を取得する方法

1. 前提条件

まず、対象となるHTMLテーブルと各行に配置された「削除」ボタンを用意します。

<table>
    <tr>
        <td>John Doe</td>
        <td>0123456789</td>
        <td>123-4567</td>
        <td>New York, USA</td>
        <td><input type="button" class="btn" value="削除" /></td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>0987654321</td>
        <td>765-4321</td>
        <td>Tokyo, Japan</td>
        <td><input type="button" class="btn" value="削除" /></td>
    </tr>
</table>

ここでは、各行の最後に「削除」ボタンが配置されており、ユーザーがこのボタンをクリックすると、その行の情報を取得するようにします。

2. jQueryのセットアップ

次に、jQueryを利用して削除ボタンをクリックしたときに行を取得します。jQueryを使用するため、jQueryライブラリを読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

これで、jQueryを使ってテーブル操作ができるようになります。

3. 行の取得方法

削除ボタンがクリックされたときに、そのボタンが属する行の情報を取得するためのコードを追加します。

$(document).ready(function() {
    // 削除ボタンがクリックされたときのイベントリスナーを設定
    $(".btn").on("click", function() {
        // クリックされたボタンの親の行 (<tr>) を取得
        var selectedRow = $(this).closest('tr');

        // 行内の各セル (td) の値を取得
        var name = selectedRow.children("td").eq(0).text();
        var tel = selectedRow.children("td").eq(1).text();
        var postcode = selectedRow.children("td").eq(2).text();
        var address = selectedRow.children("td").eq(3).text();

        // 取得した情報をコンソールに表示
        console.log("名前: " + name);
        console.log("電話番号: " + tel);
        console.log("郵便番号: " + postcode);
        console.log("住所: " + address);
    });
});

コードの解説

1. $(document).ready(function() {...})

   • ページの読み込みが完了したときにスクリプトを実行します。

2. $(".btn").on("click", function() {...})

   • .btnクラスの削除ボタンがクリックされたときにイベントを発火させます。

3. var selectedRow = $(this).closest('tr');

   • $(this)はクリックされたボタンを指し、closest('tr')でそのボタンを含む最も近い<tr>タグ（つまり行）を取得します。

4. var name = selectedRow.children("td").eq(0).text();

   • selectedRow.children("td")で行内の全てのセルを取得し、eq(0)で最初のセルの値を取得します。同様にeq(1), eq(2), eq(3)でそれぞれのセルの値を取得します。

5. console.log(...)

   • 取得した各値をコンソールに表示します。

4. 実行結果

上記のコードを実行すると、削除ボタンがクリックされたときに、その行の名前、電話番号、郵便番号、住所がコンソールに表示されます。

例えば、「John Doe」の行の削除ボタンをクリックすると、次のような結果がコンソールに表示されます。

名前: John Doe
電話番号: 0123456789
郵便番号: 123-4567
住所: New York, USA

5. 応用

行の削除

クリックされた行を削除する場合は、次のようにremove()メソッドを使います。

selectedRow.remove();

これにより、削除ボタンをクリックした行がテーブルから削除されます。

別の操作の追加

例えば、行の情報を別のフォームに転送して編集する、といった操作を追加することも可能です。selectedRowで行の情報を取得できるため、さまざまな操作に応用できます。