Penjelasan terperinci tentang langkah-langkah untuk memasukkan baris baharu dalam jadual dengan jQuery

Penjelasan terperinci tentang langkah-langkah untuk memasukkan baris baharu dalam jadual dengan jQuery

Dalam pembangunan web, jQuery boleh digunakan untuk mengendalikan elemen DOM dengan mudah dan mencapai kesan interaktif pada halaman. Memasukkan baris baharu ke dalam jadual ialah keperluan biasa Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mencapai fungsi ini dan memberikan contoh kod khusus.

1. Perkenalkan perpustakaan jQuery

Sebelum menggunakan jQuery, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu ke dalam halaman web. Ia boleh diimport melalui CDN, atau anda boleh memuat turun perpustakaan jQuery secara tempatan dan kemudian mengimportnya.

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

2. Tulis struktur jadual HTML

Tulis struktur jadual ringkas pada halaman untuk menunjukkan kesan memasukkan baris baharu ke dalam jadual.

<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 Gunakan jQuery untuk memasukkan baris baharu

Seterusnya, kami menggunakan jQuery untuk melaksanakan fungsi memasukkan baris baharu ke dalam jadual selepas mengklik butang.

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

Dalam kod di atas, kami mula-mula menggunakan $(document).ready()来确保页面加载完成后再执行代码。接着，通过$('#addRow').click()来监听按钮点击事件，当按钮被点击时执行相应的操作。在点击事件的处理函数中，使用$('#myTable tbody').append() untuk menambah baris baharu dalam badan jadual.

4. Sepadukan kod

Berdasarkan langkah di atas, sepadukan kod yang memperkenalkan perpustakaan jQuery, kod HTML struktur jadual dan kod JavaScript yang memasukkan baris baharu.

    
    
    
    
    <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>

Kesimpulan

Melalui langkah di atas, kami memperkenalkan secara terperinci cara menggunakan jQuery untuk melaksanakan fungsi memasukkan baris baharu dalam jadual, dan menyediakan contoh kod khusus. Dengan cara ini, kesan penambahan data secara dinamik pada jadual boleh direalisasikan dengan mudah dan cepat, meningkatkan pengalaman pengguna.

Saya harap artikel ini bermanfaat kepada anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Penjelasan terperinci tentang langkah-langkah untuk memasukkan baris baharu dalam jadual dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!