How to use jQuery to easily add rows to a table

How to use jQuery to easily add rows to a table

In web development, the table is one of the commonly used page elements, and dynamically adding rows to the table The operation is also one of the functions that often need to be implemented. You can easily add rows to a table using jQuery. The specific implementation method will be introduced below and a code example will be attached.

First, we need a basic HTML table structure:

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>
<button id="addRowBtn">Add Row</button>

Next, we use jQuery to write the operation code for adding rows:

$(document).ready(function() {
    $("#addRowBtn").click(function() {
        var newRow = "<tr><td>New Name</td><td>New Age</td><td>New Country</td></tr>";
        $("#myTable tbody").append(newRow);
    });
});

In the above code, We first use jQuery's $(document).ready() method to ensure that the document is loaded before performing the operation. Then listen to the click event of the button through the $("#addRowBtn").click() method, and execute the callback function when the button is clicked.

In the callback function, we use the variable newRow to store the HTML code of a new table row, and then pass $("#myTable tbody").append(newRow) Add new rows to the <tbody> of the table. <p>Now, when the page is loaded, click the "Add Row" button to dynamically add a row of data to the table. </p> <p>Summary: Using jQuery, you can easily add rows to the table. You only need to write simple code to achieve the function. I hope this article can help readers better use jQuery to operate tables and improve web development efficiency. </p> </tbody>

The above is the detailed content of How to use jQuery to easily add rows to a table. For more information, please follow other related articles on the PHP Chinese website!