July 12, 2014

Dynamically Add/Remove Rows In HTML Table Using JavaScript



In this example, I'll show you how to create dynamic HTML table which will display table rows having these properties:

1. User can add rows of table dynamically which contains the list and textbox when press button named "Add More...". 

2. User can remove the row of his choice too. 

3. Here I set the maximum number of rows can be generated. 



HOW I DONE THIS? Well I counted the total number of items in the list and fixed the maximum count number there. Like I have 3 item in the list present in row, then this code will allow user to generate the three (03) rows only. And will show error when user tries to add another row after the 3rd one.

4. Here I set the validation check on text field.




I'm using the donation amount field for this example which can accept only digit value either contains decimal or not. So If user tries to SAVE the record, application will prompt the user to enter the amount which should be greater than 0 and should be a digit value.

Here is source Code of this application:


 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>Dynamically Add/Remove Rows In HTML Table Using JavaScript</title>  
   <script type="text/javascript">  
     function addRow(tableId) {  
       var listValues =  
           [{ value: "1", text: "Charity 1" }, { value: "2", text: "Charity 2" }, { value: "3", text: "Charity 3" }];  
       document.getElementById('hdnListCount').value = listValues.length;  
       var table = document.getElementById(tableId);  
       var listCount = document.getElementById('hdnListCount').value;  
       var rowCount = table.rows.length;  
       if (rowCount <= listCount) {  
         var row = table.insertRow(rowCount);  
         // Column 1   
         var cell1 = row.insertCell(0);  
         var ddlId = "ddlCharity" + ((rowCount - 1) + 1);  
         var element1 = document.createElement('select');  
         element1.setAttribute('id', ddlId);  
         for (var i = 0; i < listValues.length; i += 1) {  
           var option = document.createElement('option');  
           option.setAttribute('value', listValues[i].value);  
           option.appendChild(document.createTextNode(listValues[i].text));  
           element1.appendChild(option);  
         }  
         cell1.appendChild(element1);  
         // Column 2  
         var cell2 = row.insertCell(1);  
         var txtId = "txtDonationAmount" + ((rowCount - 1) + 1);  
         var element2 = document.createElement("input");  
         element2.setAttribute('id', txtId);  
         element2.type = "text";  
         element2.setAttribute('value', '0');  
         cell2.appendChild(element2);  
         // Column 3  
         var cell3 = row.insertCell(2);  
         var btnId = "btnDelete" + ((rowCount - 1) + 1);  
         var element3 = document.createElement("input");  
         element3.setAttribute('id', btnId);  
         element3.type = "button";  
         element3.setAttribute('value', 'Delete');  
         element3.onclick = function() { removeRow(btnId); };  
         cell3.appendChild(element3);  
       } else {  
         alert('You can add ' + listCount + ' charity-donation details only!');  
       }  
     }  
     function removeRow(btnDelete) {  
       var table = document.getElementById('dataTable');  
       var rowCount = table.rows.length;  
       for (var i = 0; i < rowCount; i++) {  
         var row = table.rows[i];  
         var rowObj = row.cells[2].childNodes[0];  
         if (rowObj.id == btnDelete) {  
           table.deleteRow(i);  
           rowCount--;  
         }  
       }  
     }  
     function saveDetail() {  
       var table = document.getElementById('dataTable');  
       var rowCount = table.rows.length;  
       var rowState = "";  
       if (rowCount > 1) {  
         for (var i = 1; i <= rowCount; i++) {  
           var row = table.rows[i];  
           var charitySelect = row.cells[0].childNodes[0];  
           var donationAmount = row.cells[1].childNodes[0];  
           if (donationAmount.value == "0") {  
             alert("Donation amount should be greater than 0");  
             donationAmount.focus();  
             break;  
           }  
           var isValidRegex = /^\d+$/;  
           if (!isValidRegex.test(donationAmount.value)) {  
             alert("Donation amount should be a digit value");  
             donationAmount.focus();  
             break;  
           }  
           rowState = rowState + charitySelect.value + "," + donationAmount.value + ":";  
           document.getElementById('hdnTableState').value = rowState;  
         }  
       } else {  
         alert('No record present!');  
       }  
     }  
   </script>  
 </head>  
 <body>  
   <input type="button" name="btnSave" value="Save" onclick="saveDetail();" />  
   <input type="button" value="Add More..." onclick="addRow('dataTable')" />  
   <input type="hidden" id="hdnListCount" />  
   <input type="hidden" id="hdnTableState" />  
   <table id="dataTable" width="350px" border="1">  
     <tr>  
       <th>Charity  
       </th>  
       <th>Donation Amount  
       </th>  
       <th>Action  
       </th>  
     </tr>  
   </table>  
 </body>  
 </html>  

Hope you understand the whole logic. Let me know if any query remains.