How to add table row in a table using jQuery?

jQuery
01 Jan, 2023
498 Views

Step 1: Download jQuery

Install jquery locally or include it from cdn.

Step 2: Create dynamic webpage

First create html page,

Create button using <button> tags that will be used to click and add rows dynamically, then create table using <table> tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adding dynamic row using jQuery</title>
</head>
<body>

<br>
<button type="button" id="button1">Add Row</button>
<br>
<br>

<table border="1px" id="table1">
    <tr>
        <th>S.no.</th>
        <th>Name</th>
    </tr>
</table>
</body>

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
    $(document).ready(function() {
        var table = $('#table1');
        let index = 1;

        $('#button1').click(function(){
            //Add row
            var row = `<tr><td> ${index}</td><td> </td></tr>`;
            table.append(row);
            index++;
        })
    });
</script>

</html>