Use jQuery to automatically add dynamic table rows

Title: Use jQuery to dynamically add rows and create dynamic tables

In web development, dynamically adding rows is a common requirement, especially when creating tables hour. Through the powerful functions of jQuery, we can easily dynamically add rows and create dynamic tables. Next, we will demonstrate how to implement this feature through specific code examples.

First, make sure you have introduced jQuery into your project. If it is not introduced, it can be introduced through the following CDN method:

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

Next, we will demonstrate a simple example to create a dynamic table containing name and age. We trigger the dynamic addition of rows through a button.

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

In the above code, we first create an empty table myTable and define the table header. Then a button addRow is created. When the button is clicked, jQuery will listen to the button click event and trigger the operation of adding a new row to the table. Each time the button is clicked, a row will be added containing input boxes for name and age.

Through the above code examples, we have successfully implemented the function of dynamically adding rows and creating dynamic tables using jQuery. This method is not only simple and fast, but also can meet the needs of many dynamic tables. I hope this article is helpful to you. If you have any questions, please leave a message for discussion.

The above is the detailed content of Use jQuery to automatically add dynamic table rows. For more information, please follow other related articles on the PHP Chinese website!