jquery add row to table dynamically example

jquery add row to table dynamically example Using jQuery .append() method. how to add (insert) / remove (delete) HTML Table Rows dynamically using jQuery Example with demo.

jquery add row to table dynamically example

Dynamically Add/Remove rows in HTML table using jQuery Add table rows on button click and remove the added rows after addition.

Using .append() and .remove() method we can dynamic add and delete row using jquery.

How to Add and Delete Rows Dynamically using jQuery?

index.html
Let’s look at an example to see how this works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Add and Delete Rows Dynamically Using jQuery - www.pakainfo.com</title>
<style>
    form{
        margin: 20px;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 90%;
        margin: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;      	
    }
  	.delete-row, h2{
      margin:20px;
  	}
</style>

</head>
<body style="border:1px solid grey">
  	<h2>How to Add and Delete Rows Dynamically Using jQuery - www.pakainfo.com</h2>
    <form>
        <input type="text" id="name" placeholder="Enter your Name">
        <input type="text" id="email" placeholder="Enter your Email Address">
    	<input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Laptop</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>dasktop</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>

Don’t Miss : Add And Delete Rows Dynamically Using JQuery

Read Also:  JavaScript Access PHP variables in jQuery

script.js

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(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);
        });
        
        // Find and deleted selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>

I hope you get an idea about jquery add row to table dynamically example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.