jQueryを使用して動的テーブル行を自動的に追加する

タイトル: jQuery を使用して動的に行を追加し、動的テーブルを作成する

Web 開発では、特にテーブルを作成するときに動的に行を追加することが一般的な要件です。 jQuery の強力な機能を使用すると、行を動的に追加し、動的なテーブルを簡単に作成できます。次に、具体的なコード例を通じてこの機能を実装する方法を示します。

まず、プロジェクトに jQuery が導入されていることを確認してください。導入されていない場合は、次の CDN メソッドを通じて導入できます。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

次に、名前と年齢を含む動的テーブルを作成する簡単な例を示します。ボタンを通じて行の動的な追加をトリガーします。

    
    
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


    

        

            
姓名
            
年龄
        
    
    增加行

    <script>
        $(document).ready(function(){
            $("#addRow").click(function(){
                $("#myTable").append("<tr><td><input type='text' name='name'></td><td><input type='text' name='age'></td></tr>");
            });
        });
    </script>

上記のコードでは、まず空のテーブル myTable を作成し、テーブル ヘッダーを定義します。次に、ボタン addRow が作成され、ボタンがクリックされると、jQuery はボタンのクリック イベントをリッスンし、テーブルに新しい行を追加する操作をトリガーします。ボタンをクリックするたびに、名前と年齢の入力ボックスを含む行が追加されます。

上記のコード例により、jQuery を使用して動的に行を追加し、動的テーブルを作成する機能を実装することに成功しました。この方法はシンプルかつ高速であるだけでなく、多くの動的テーブルのニーズを満たすことができます。この記事がお役に立てば幸いです。ご質問がございましたら、ディスカッションのためにメッセージを残してください。

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