Post
Ask Question

Dynamically Add and Delete Rows in HTML and JavaScript

Dynamically Add and Delete rows in Html and Javascript

 
This is a small blog post which will provide you the simplest approach to dynamically add and delete rows using javascript and HTML.
 

Introduction

 
This small blog post will help you in creating an HTML page where you can add and delete rows using javascript. In most of the cases, it is required in the project to add more rows. Let us take an example common timesheet application or your expense details where the user adds more rows and it should be dynamic. Also, it is required to delete the unimportant rows from the table. In this, I blog I will provide you a very basic and the simplest to achieve it.
 
Technicalities
 
The easiest way to achieve the functionality is to use an Html table and write two javascript functions to add and delete rows. Sometimes people get confused at the time of requirements and try to use some external javascript framework. I have seen developers use JQuery to achieve this functionality. However JQuery is a great framework to achieve many things by writing less code. But from the view point legacy project, it may not be required to use JQuery. Let us take an example of financial calculation which is existing for the last 10 years and it has been developed in JSP with Javascript. In this case it is not advisable to use external javascript framework as there is a chance of UI distortion. Let me provide you the java script code for addition and deletion of rows.
  1. function addRow(tableID) {  
  2.     var table = document.getElementById(tableID);  
  3.     var rowCount = table.rows.length;  
  4.     var row = table.insertRow(rowCount);  
  5.     //Column 1  
  6.     var cell1 = row.insertCell(0);  
  7.     var element1 = document.createElement("input");  
  8.     element1.type = "button";  
  9.     var btnName = "button" + (rowCount + 1);  
  10.     element1.name = btnName;  
  11.     element1.setAttribute('value', 'Delete'); // or element1.value = "button";  
  12.     element1.onclick = function() {  
  13.         removeRow(btnName);  
  14.     }  
  15.     cell1.appendChild(element1);  
  16.     //Column 2  
  17.     var cell2 = row.insertCell(1);  
  18.     cell2.innerHTML = rowCount + 1;  
  19.     //Column 3  
  20.     var cell3 = row.insertCell(2);  
  21.     var element3 = document.createElement("input");  
  22.     element3.type = "text";  
  23.     cell3.appendChild(element3);  
  24. }  
  25.   
  26. function removeRow(btnName) {  
  27.     try {  
  28.         var table = document.getElementById('dataTable');  
  29.         var rowCount = table.rows.length;  
  30.         for (var i = 0; i < rowCount; i++) {  
  31.             var row = table.rows[i];  
  32.             var rowObj = row.cells[0].childNodes[0];  
  33.             if (rowObj.name == btnName) {  
  34.                 table.deleteRow(i);  
  35.                 rowCount--;  
  36.             }  
  37.         }  
  38.     } catch (e) {  
  39.         alert(e);  
  40.     }  
  41. } 
The above is the basic code outline. The complete HTML code is given below for your understanding.
  1. <!--  
  2. -- Author : Debadatta Mishra  
  3. -- Subject : Easiest way to dynamically add and delete rows in java script  
  4. -->  
  5. <HTML>  
  6.   
  7.      <HEAD>  
  8.           <TITLE> Add/Remove dynamic rows in HTML table </TITLE>  
  9.           <SCRIPT language="javascript">  
  10.                function addRow(tableID) {  
  11.         var table = document.getElementById(tableID);  
  12.         var rowCount = table.rows.length;  
  13.         var row = table.insertRow(rowCount);  
  14.         //Column 1  
  15.         var cell1 = row.insertCell(0);  
  16.         var element1 = document.createElement("input");  
  17.         element1.type = "button";  
  18.         var btnName = "button" + (rowCount + 1);  
  19.         element1.name = btnName;  
  20.         element1.setAttribute('value', 'Delete'); // or element1.value = "button";  
  21.         element1.onclick = function () { removeRow(btnName); }  
  22.         cell1.appendChild(element1);  
  23.         //Column 2    
  24.         var cell2 = row.insertCell(1);  
  25.         cell2.innerHTML = rowCount + 1;  
  26.         //Column 3  
  27.         var cell3 = row.insertCell(2);  
  28.         var element3 = document.createElement("input");  
  29.         element3.type = "text";  
  30.         cell3.appendChild(element3);  
  31.     }  
  32.     function removeRow(btnName) {  
  33.         try {  
  34.             var table = document.getElementById('dataTable');  
  35.             var rowCount = table.rows.length;  
  36.             for (var i = 0; i < rowCount; i++) {  
  37.                 var row = table.rows[i];  
  38.                 var rowrowObj = row.cells[0].childNodes[0];  
  39.                 if (rowObj.name == btnName) {  
  40.                     table.deleteRow(i);  
  41.                     rowCount--;  
  42.                 }  
  43.             }  
  44.         }  
  45.         catch (e) {  
  46.             alert(e);  
  47.         }  
  48.     }  
  49. </SCRIPT>  
  50.      </HEAD>  
  51.      <H3>This demo html file provides you easiest approach to dynamically add and delete rows</H3>  
  52.   
  53.      <BODY>  
  54.           <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  
  55.           <TABLE id="dataTable" width="350px" border="1">  
  56.                <TR>  
  57.                     <TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>  
  58.                     <TD>1</TD>  
  59.                     <TD><input type="text" value="" name="nameTxt"></TD>  
  60.                </TR>  
  61.           </TABLE>  
  62.      </BODY>  
  63.   
  64. </HTML> 

Conclusion

 
I hope you will enjoy my small blog and I hope it will help you. In case of any problem in viewing the code, you can download the compete for zip file containing the HTML file.