How to use JQuery In Javascript

Using JavaScript

This approach utilizes jQuery to dynamically add rows to an HTML table. When the “Click to add row” button is clicked, a new row is appended to the table’s tbody. The serial number increments with each addition, ensuring unique identifiers for each row. Input fields for name and email are included in each row. The jQuery append() function simplifies DOM manipulation, reducing the need for verbose JavaScript code. Basic CSS styles are applied to enhance table appearance. Overall, jQuery streamlines the process of dynamic table creation by simplifying the addition of rows and handling DOM manipulation efficiently.

Example: This example shows the implementation of the above-explained approach.

HTML


                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <script src=
"https://code.jquery.com/jquery-3.7.1.min.js"
        integrity=
"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
            crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    input[type="text"] {
        border: none;
        background: yellow;
    }
</style>

<body>
    <button id="add"> Add row</button>

    <table id="tab">
        <thead>
            <tr>
                <th>Serial number</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            let rowNum = 1;

            $("#add").click(function () {
                $("#tab tbody").append("<tr><td>" +
                  rowNum++ + 
 "</td><td><input placeholder=name/></td><td><input placeholder=email/></td></tr>");

            });
        });

    </script>
</body>

</html>

Ouptut:

Output

Create Dynamic Table with Auto Increment Serial Number on Button Click Event

We will see how we can auto increment the serial number of a table in html using JavaScript. We will build a button clicking on that will add a row to a table with an increasing number of rows. It will show the dynamic behavior, showing that we will use JavaScript and jQuery.

These are the following methods:

Table of Content