How to add table row in a table using jQuery?

Last Updated : 20 Sep, 2024

In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.

Steps to add table row

The required markup for the row is constructed.

markup = "<tr><td> + information + </td></tr>"

The table body is selected to which the table rows to be added.

tableBody = $("table tbody")

Finally the markup is added to the table body.

tableBody.append(markup)

Example: In this example we demonstrates how to dynamically add table rows using jQuery. When the "Add row" button is clicked, a new row with updated text is appended to the table's body.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to add table row in jQuery?
    </title>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    
    <style>
        table {
            margin: 25px 0;
            width: 200px;
        }

        table th, table td {
            padding: 10px;
            text-align: center;
        }

        table, th, td {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
    
    <b>How to add table row in jQuery?</b>
    
    <p>
        Click on the button below to
        add a row to the table
    </p>
    
    <button class="add-row">
        Add row
    </button>
    
    <table>
        <thead>
            <tr>
                <th>Rows</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>This is row 0</td>
            </tr>
        </tbody>
    </table>
    
    <!-- Script to add table row -->
    <script>
        let lineNo = 1;
        $(document).ready(function () {
            $(".add-row").click(function () {
                markup = "<tr><td>This is row " 
                    + lineNo + "</td></tr>";
                tableBody = $("table tbody");
                tableBody.append(markup);
                lineNo++;
            });
        }); 
    </script>
</body>
</html>