jQueryを使ってテーブルに新しい行を挿入する手順を詳しく解説

jQuery を使用してテーブルに新しい行を挿入する手順の詳細な説明

Web 開発では、jQuery を使用して DOM 要素を簡単に操作し、インタラクティブな効果を実現できます。ページ。テーブルに新しい行を挿入することは一般的な要件ですが、この記事では、jQuery を使用してこの機能を実現する方法と具体的なコード例を詳しく紹介します。

1. jQuery ライブラリの導入

jQuery を使用する前に、まず Web ページに jQuery ライブラリを導入する必要があります。 CDN を通じてインポートすることも、jQuery ライブラリをローカルにダウンロードしてインポートすることもできます。

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

2. HTML テーブル構造の記述

ページに単純なテーブル構造を記述して、テーブルに新しい行を挿入した場合の効果を示します。

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
<button id="addRow">添加新行</button>

3. jQuery を使用して新しい行を挿入する

次に、jQuery を使用して、ボタンをクリックした後にテーブルに新しい行を挿入する機能を実装します。

$(document).ready(function() {
    $('#addRow').click(function() {
        $('#myTable tbody').append(`
            <tr>
                <td>王五</td>
                <td>28</td>
            </tr>
        `);
    });
});

上記のコードでは、まず $(document).ready() を使用して、コードを実行する前にページがロードされていることを確認します。次に、$('#addRow').click() を通じてボタン クリック イベントをリッスンし、ボタンがクリックされたときに対応する操作を実行します。クリック イベント ハンドラーで、$('#myTable tbody').append() を使用して、テーブルの tbody に新しい行を追加します。

4. コードの統合

上記の手順に基づいて、jQuery ライブラリを導入するコード、テーブル構造の HTML コード、新しい行を挿入する JavaScript コードを統合します。

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


    

        

            

                
姓名
                
年龄
            
        
        

            

                
张三
                
25
            
            

                
李四
                
30
            
        
    
    添加新行
    
    <script>
        $(document).ready(function() {
            $('#addRow').click(function() {
                $('#myTable tbody').append(`
                    <tr>
                        <td>王五</td>
                        <td>28</td>
                    </tr>
                `);
            });
        });
    </script>

結論

上記の手順を通じて、jQuery を使用してテーブルに新しい行を挿入する機能を実装する方法を詳しく紹介し、具体的なコード例を示しました。このようにして、テーブルにデータを動的に追加する効果を簡単かつ迅速に実現でき、ユーザー エクスペリエンスが向上します。

この記事がお役に立てば幸いです。読んでいただきありがとうございます。

以上がjQueryを使ってテーブルに新しい行を挿入する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。