jQueryを使ってテーブルに新しい行を挿入する手順を詳しく解説-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-02-29 08:48:03

オリジナル

730 人が閲覧しました

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>