Dynamically Add/Delete HTML Table Rows Using Javascript

Theory of Computation
In this article, you will learn how to create a simple user interface where a user can add or delete multiple table rows in a form dynamically using Javascript.
Sometimes, there may be a requirement for the user to add multiple repeated row's fields in a form. We cannot assume how many fields we should provide on the webpage. Like, we need to provide some employees details. There is no surety of how many employee details, may be later we have to delete some. Let's discuss how we can achieve these tasks. In this post, we will write code to add or remove the entire row with there input fields dynamically using Javascript. We will provide two buttons, the first button to add new rows to the table and the second to remove rows.
As we know, Javascript is a dynamic language. It means it can control, access and manipulate the HTML elements dynamically on the client side. We can easily add and remove HTML elements in a web page using Javascript. In this article, we will provide you with a simple way to add or remove HTML table rows with there fields dynamically. The below code has an HTML form and two javascript functions addRows() and deleteRows() to add and delete the table rows respectively.
<html>
<head>
<title>Onclick increase Table Rows</title>
<script type="text/javascript">
function addRows(){ 
	var table = document.getElementById('emptbl');
	var rowCount = table.rows.length;
	var cellCount = table.rows[0].cells.length; 
	var row = table.insertRow(rowCount);
	for(var i =0; i <= cellCount; i++){
		var cell = 'cell'+i;
		cell = row.insertCell(i);
		var copycel = document.getElementById('col'+i).innerHTML;
		cell.innerHTML=copycel;
		if(i == 3){ 
			var radioinput = document.getElementById('col3').getElementsByTagName('input'); 
			for(var j = 0; j <= radioinput.length; j++) { 
				if(radioinput[j].type == 'radio') { 
					var rownum = rowCount;
					radioinput[j].name = 'gender['+rownum+']';
				}
			}
		}
	}
}
function deleteRows(){
	var table = document.getElementById('emptbl');
	var rowCount = table.rows.length;
	if(rowCount > '2'){
		var row = table.deleteRow(rowCount-1);
		rowCount--;
	}
	else{
		alert('There should be atleast one row');
	}
}
</script>
</head>
<body>
<form action="#" method="post">    
	<table id="emptbl">
		<tr>
			<th>Employee Name</th>
			<th>Phone</th>
			<th>Department</th> 
			<th>Gender</th> 
		</tr> 
		<tr> 
			<td id="col0"><input type="text" name="empname[]" value="" /></td> 
			<td id="col1"><input type="text" name="phone[]" value="" /></td> 
			<td id="col2"> 
			<select name="department[]" id="dept"> 
			<option value="0">Select Department</option> 
			<option value="1">Sales</option>
			<option value="2">IT</option>
			<option value="3">Warehouse</option>
			</select> 
		        </td> 
		        <td id="col3"> 
			<input type="radio" name="gender[0]" value="male" />Male 
			<input type="radio" name="gender[1]" value="female" />Female 
		        </td> 
		</tr>  
	</table> 
	<table> 
		<tr> 
			<td><input type="button" value="Add Row" onclick="addRows()" /></td> 
			<td><input type="button" value="Delete Row" onclick="deleteRows()" /></td> 
			<td><input type="submit" value="Submit" /></td> 
		</tr>  
	</table> 
 </form> 
</body> 
</html>

In the above code, we have taken a form element with three buttons to Add Row, Delete Row and Submit form data. Within the form element, we have taken a table to display the form input data. To perform dynamic operations on the table using Javascript, we have given an id 'emptbl' to the table.
These are the step-by-step code explanations on how a new row is dynamically created when user clicks on the 'Add Row' button.
addRows() - Within the head section, we have created a Javascript function name addRows() that is responsible for adding a new table row with input fields. For this, first we got the table element with table id and stored in a javascript variable table.
var table = document.getElementById('emptbl');
Next, we stored the number of <tr> element using the Javascript property rows.length in a variable rowCount and rows[0].cells.length property returns number of <td> elements of first row.
var rowCount = table.rows.length;
var cellCount = table.rows[0].cells.length;
Next, we have created an empty row using Javascript property insertRow().
var row = table.insertRow(rowCount);
Next, we have dynamically generated the cells within the empty row using a for loop and taken the innerHTML of the old cell with cell index and paste it in the new one.
for(var i =0; i <= cellCount; i++){

}
These are the step-by-step code explanations on how an existing row is dynamically deleted when a user clicks the 'Delete Row' button.
deleteRows() - Within the head section after addRows() function, we have created other Javascript function name deleteRows() that is responsible to delete existing table row with input fields. For this, first we got the table element with table id and stored in a variable table.
Next, we stored the number of <tr> element using property rows.length in a variable rowCount.
var rowCount = table.rows.length;
Next, using the IF Else statement, we have checked whether the number of table rows is greater than one or not.
if(rowCount > '2'){

}
If it is TRUE, then it deletes one row with the Javascript property deleteRow() and decrement the number of rows by one.
var row = table.deleteRow(rowCount-1);
rowCount--;
We hope this code helps someone. You can implement this easily with minor edits. During implementation, please take care of table id and columns id.
Download and open PDF file using Ajax
Javascript window location 
How to reverse a number in Javascript 
How to reverse string in Javascript 
PHP script to read email inbox  How to retrieve data from database without refreshing page  Print specific part of webpage  Store Emoji character in MySQL using PHP PHP Display PDF file from Database Jquery ajax loop through data Dynamically add/remove rows in html table using jquery Submit form without page refresh using javascript PHP Form Validation Tutorial Google reCAPTCHA v3 PHP example Select/deselect all checkboxes using Javascript
 Javascript speech recognition example
 Image popup on page load using HTML and jQuery
 jQuery File upload progress bar with file size validation
  

Jan 3
Stateful vs Stateless
A Stateful application recalls explicit subtleties of a client like profile, inclinations, and client activities...

A Stateful application recalls explicit subtleties of a client like profile, inclinations, and client activities...

Dec 29
Best programming language to learn in 2021
In this article, we have mentioned the analyzed results of the best programming language for 2021...

In this article, we have mentioned the analyzed results of the best programming language for 2021...

Dec 20
How is Python best for mobile app development?
Python has a set of useful Libraries and Packages that minimize the use of code...

Python has a set of useful Libraries and Packages that minimize the use of code...

July 18
Learn all about Emoji
In this article, we have mentioned all about emojis. It's invention, world emoji day, emojicode programming language and much more...

In this article, we have mentioned all about emojis. It's invention, world emoji day, emojicode programming language and much more...

Jan 10
Data Science Recruitment of Freshers
In this article, we have mentioned about the recruitment of data science. Data Science is a buzz for every technician...

In this article, we have mentioned about the recruitment of data science. Data Science is a buzz for every technician...






eTutorialsPoint©Copyright 2016-2022. All Rights Reserved.