Dynamically table rows add and remove using jQuery.

  • Post author:
  • Post category:jQuery
  • Post comments:0 Comments
  • Post last modified:February 13, 2021
  • Reading time:7 min(s) read

In this tutorial, we will learn how to Dynamically table rows add and remove using jQuery and Bootstrap.

At first, create a folder i.e, Jquery, inside the folder create an index.php file then go to the bootstrap4 website to get the CSS and js CDN links. Write the HTML code, after the title tag paste the CSS CDN links and after the body closing tag paste the js links. Now, inside the body tag write the table code, and don’t forget to write the table body id i.e “” The id will change dynamically.
Here is the complete HTML code.

<!DOCTYPE html>
<html>
<head>
	<title>Dynamic table row add and delete using jquery</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<h3 class="text-center">DYNAMIC TABLE ROW ADD & REMOVE USING JQUERY.</h3>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-12">
								<table class="table table-bordered">
                                	<thead>
                                		<tr>
		                                  <td><label>NAME</label></td>
		                                  <td><label>EMAIL</label></td>
		                                  <td><label>PHONE NUMBER</label></td>
		                                  <td><label>PHOTO</label></td>
		                                  <td><label>Action</label></td>
                                		</tr>
                                	</thead>
                                	<tbody id="dynamic_field">
                                 		<tr>
		                                  <td>
		                                  	<input type="text" name="name[]" id="name" class="form-control name">
		                                  </td>
		                                  <td>
		                                  	<input type="email" name="email[]" id="email" class="form-control email">
		                                  </td>
		                                  <td>
		                                  <input type="text" name="phone[]" id="phone" class="form-control phone"  />
		                                  </td>
		                                  <td>
		                                 	<input type="file" name="files[]" id="files" class="form-control files">
		                                  </td>
		                                 <td>
		                                 	<button type="button" name="add" id="add" class="btn btn-success ">+</button>
		                                 </td>
                                		</tr>
                                	</tbody>
                               </table>  
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
html_table
Now we will start the jquery code.

Basically, we will use the on-click event to detect a click on the add row button and then append() the method to add a row in the table and remove() the method used to remove the row on the table.
here is the complete code of jquery.

<script type="text/javascript">
	$(document).ready(function(){
			var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td> <input type="text" name="organization[]" id="organization" class="form-control organization"> </td><td><input type="text" name="designation[]" id="designation" class="form-control designation"> </td><td><input type="text" name="duration[]" id="duration" class="form-control duration"  /></td><td> <input type="file" name="files[]" id="files" class="form-control files"> </td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">x</button></td></tr>'); 
		   });
	       $(document).on('click', '.btn_remove', function(){  
	           var button_id = $(this).attr("id");   
	           $('#row'+button_id+'').remove();  
	      });
	});
</script>
jquery_add_remove

Now to the complete code of adding and removing Dynamic table using JQuery and bootstrap4.

<!DOCTYPE html>
<html>
<head>
	<title>Dynamic table row add and delete using jquery</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<h3 class="text-center">DYNAMIC TABLE ROW ADD & REMOVE USING JQUERY.</h3>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-12">
								<table class="table table-bordered">
                                	<thead>
                                		<tr>
		                                  <td><label>NAME</label></td>
		                                  <td><label>EMAIL</label></td>
		                                  <td><label>PHONE NUMBER</label></td>
		                                  <td><label>PHOTO</label></td>
		                                  <td><label>Action</label></td>
                                		</tr>
                                	</thead>
                                	<tbody id="dynamic_field">
                                 		<tr>
		                                  <td>
		                                  	<input type="text" name="name[]" id="name" class="form-control name">
		                                  </td>
		                                  <td>
		                                  	<input type="email" name="email[]" id="email" class="form-control email">
		                                  </td>
		                                  <td>
		                                  <input type="text" name="phone[]" id="phone" class="form-control phone"  />
		                                  </td>
		                                  <td>
		                                 	<input type="file" name="files[]" id="files" class="form-control files">
		                                  </td>
		                                 <td>
		                                 	<button type="button" name="add" id="add" class="btn btn-success ">+</button>
		                                 </td>
                                		</tr>
                                	</tbody>
                               </table>  
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!------------------------------JQUERY CODE START------------------------------------------------>
<script type="text/javascript">
	$(document).ready(function(){
      /////////////////////////////ADD TABLE ROW CODE///////////////////////////////////

			var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td> <input type="text" name="organization[]" id="organization" class="form-control organization"> </td><td><input type="text" name="designation[]" id="designation" class="form-control designation"> </td><td><input type="text" name="duration[]" id="duration" class="form-control duration"  /></td><td> <input type="file" name="files[]" id="files" class="form-control files"> </td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">x</button></td></tr>'); 
		   });
      /////////////////////////////REMOVE TABLE ROW CODE///////////////////////////////////
	       $(document).on('click', '.btn_remove', function(){  
	           var button_id = $(this).attr("id");   
	           $('#row'+button_id+'').remove();  
	      });
	});
</script>
<!------------------------------JQUERY CODE END------------------------------------------------>
</html>

Our previous posts are Laravel, Codeigniter and PHP if you missed the videos please visit the link.

LIVE DEMO ON THIS TOPIC CLICK HERE.
And also don’t forget to share your valuable feedback so that we can improve ourselves.

Leave a Reply