jQuery を使用してテーブルに行を簡単に追加する方法

jQuery を使用してテーブルに行を簡単に追加する方法

Web 開発では、テーブルは一般的に使用されるページ要素の 1 つであり、ページ要素に動的に行を追加します。 table この操作も、実装が必要になることが多い機能の 1 つです。 jQueryを利用すると簡単にテーブルに行を追加することができますので、具体的な実装方法とコード例を以下に紹介します。

まず、基本的な HTML テーブル構造が必要です:

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>
<button id="addRowBtn">Add Row</button>

次に、jQuery を使用して行を追加する操作コードを記述します:

$(document).ready(function() {
    $("#addRowBtn").click(function() {
        var newRow = "<tr><td>New Name</td><td>New Age</td><td>New Country</td></tr>";
        $("#myTable tbody").append(newRow);
    });
});

上記のコードでは、まず、jQuery の $(document).ready() メソッドを使用して、操作を実行する前にドキュメントがロードされていることを確認します。次に、$("#addRowBtn").click() メソッドを通じてボタンのクリック イベントをリッスンし、ボタンがクリックされたときにコールバック関数を実行します。

コールバック関数では、変数 newRow を使用して新しいテーブル行の HTML コードを保存し、$("#myTable tbody").append( newRow) 新しい行をテーブルの <tbody> に追加します。 <p>ページが読み込まれたら、[行の追加] ボタンをクリックしてテーブルにデータ行を動的に追加します。 </p> <p>概要: jQuery を使用すると、簡単なコードを記述するだけでテーブルに行を簡単に追加できます。この記事が、読者が jQuery をより上手に使用してテーブルを操作し、Web 開発の効率を向上させるのに役立つことを願っています。 </p> </tbody>

以上がjQuery を使用してテーブルに行を簡単に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。