Gunakan jQuery untuk menambah baris jadual dinamik secara automatik

Tajuk: Gunakan jQuery untuk menambah baris secara dinamik dan mencipta jadual dinamik

Dalam pembangunan web, menambah baris secara dinamik adalah keperluan biasa, terutamanya apabila membuat jadual. Melalui fungsi berkuasa jQuery, kami boleh menambah baris secara dinamik dan membuat jadual dinamik dengan mudah. Seterusnya, kami akan menunjukkan cara melaksanakan ciri ini melalui contoh kod tertentu.

Pertama, pastikan anda telah memperkenalkan jQuery ke dalam projek anda. Jika ia tidak diperkenalkan, ia boleh diperkenalkan melalui kaedah CDN berikut:

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

Seterusnya, kami akan menunjukkan contoh mudah untuk mencipta jadual dinamik yang mengandungi nama dan umur. Kami mencetuskan penambahan baris yang dinamik melalui butang.

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

Dalam kod di atas, kami mula-mula mencipta jadual kosongmyTable，并定义了表头。然后创建了一个按钮addRow Apabila butang diklik, jQuery akan mendengar acara klik butang dan mencetuskan penambahan baris baharu pada jadual. Setiap kali butang diklik, satu baris akan ditambah yang mengandungi kotak input untuk nama dan umur.

Melalui contoh kod di atas, kami telah berjaya melaksanakan fungsi menambah baris secara dinamik dan mencipta jadual dinamik menggunakan jQuery. Kaedah ini bukan sahaja mudah dan pantas, tetapi juga boleh memenuhi keperluan banyak jadual dinamik. Saya harap artikel ini membantu anda Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej untuk perbincangan.

Atas ialah kandungan terperinci Gunakan jQuery untuk menambah baris jadual dinamik secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!