How to Add and Delete Rows Dynamically using jQuery

Websolutionstuff | Jan-02-2021 | Categories : Laravel PHP jQuery HTML

In this article, we will see how to add and delete rows dynamically using jquery. Also, we will see without the page refreshing add rows and delete or remove rows. Using the .append() and .remove() methods we can dynamic add and delete rows using jquery. Also, you can delete all rows at a time using the multiple checkbox options.

The append() method is used to append or add rows inside an HTML table and the .remove() method is to remove or delete table rows as well as all data inside it from the DOM dynamically with jquery.

So, let's see dynamically add/remove rows in an HTML table using javascript and jquery add and delete rows dynamically.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Add and Delete Rows Dynamically Using jQuery - websolutionstuff.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 - websolutionstuff.com</h2>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="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>dell</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>james</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>
<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 remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>

 

 

Output:

how_to_add_and_delete_rows_dynamically_using_jquery

 

You might also like:

Recommended Post
Featured Post
How To Add Date Range Picker In Angular 15 Material
How To Add Date Range Picker I...

In this tutorial, I will guide you through the process of adding a date range picker component to your Angular 15 applic...

Read More

Jun-30-2023

Top 20 Best Javascript Tips and Tricks
Top 20 Best Javascript Tips an...

Welcome to the fascinating world of JavaScript, where innovation and creativity converge to deliver dynamic and interact...

Read More

Aug-14-2023

Disable Sorting On Specific Columns In Datatable
Disable Sorting On Specific Co...

In this article, we will delve into the process of disabling sorting for specific columns in Datatables. If you find the...

Read More

Aug-24-2020

Laravel 9 Form Class Not Found
Laravel 9 Form Class Not Found

In this article, we will fix the laravel 9 form class not found error, many times we have received errors like lara...

Read More

Sep-19-2022