How To Add New Table Row On Click Of Button Using JQuery

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In JQuery we can add table row dynamically.So today we discuss how to add table row using jquery

How To Add New Table Row On Click Of Button Using JQuery

Step 1:Create index.html file and implement below code.

<form>
    <input type="text" id="name" placeholder="Name" required>
    <input type="text" id="email" placeholder="Email Address" required>
    <input type="button" class="btn btn-success add-row" value="Add Row">
</form>
<table class="table">
    <thead>
    <tr>
        <th>Select</th>
        <th>Name</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="record"></td>
        <td>Shiva</td>
        <td>Shiva@gmail.com</td>
    </tr>
    </tbody>
</table>
 

Step 2:Implement jQuery to add new rows in table.

<script type="text/javascript">
    $(document).ready(function() {
        $(".add-row").click(function() {
           
                var name = $("#name").val();
                var email = $("#email").val();
                var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
                $("table tbody").append(markup);
            
        });
    });
</script>
 


Complete Code For Adding New Table Row On Click Of Button Using JQuery

 

<!DOCTYPE html>
<html>
<head>
    <title>How To Add New Table Row On Click Of Button Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Add New Table Row On Click Of Button Using JQuery</h1>
    </div>
    <br>
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="well">
            <form>
                <input type="text" id="name" placeholder="Name" required>
                <input type="text" id="email" placeholder="Email Address" required>
                <input type="button" class="btn btn-success add-row" value="Add Row">
            </form>
            <table class="table">
                <thead>
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input type="checkbox" name="record"></td>
                    <td>Shiva</td>
                    <td>Shiva@gmail.com</td>
                </tr>
                </tbody>
            </table>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".add-row").click(function() {
                            var name = $("#name").val();
                            var email = $("#email").val();
                            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
                            $("table tbody").append(markup);
                                            });
                });
            </script>
        </div>
    </div>
    <div class="col-md-2"></div>
</div>
</body>
</html>


 

Related Post