Dynamically Add/Remove rows in HTML table using JavaScript
[ad name=”AD_INBETWEEN_POST”] A good web design involves the better user interaction and ability to fetch the data in a better way. For fetching user data, you may have to create a form wherein user can add multiple entries and submit them simultaneously. Thus for this you will need a way to add or remove fields dynamically into the HTML page. In my previous article, I had discussed about the way one can add dynamic form components into the web page. In this article we will create a user interface where user can add/delete multiple rows in a form using JavaScript. First check the user interface. In this example, we have created a table which will display our html components. On pressing Add Row, a dynamic row will be created and added in the table. And on selecting the checkbox and pressing Delete Row, the row will be removed. Following is the source.

Code

<HTML>
<HEAD>
 <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
 <SCRIPT language="javascript">
  function addRow(tableID) {

   var table = document.getElementById(tableID);

   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);

   var cell1 = row.insertCell(0);
   var element1 = document.createElement("input");
   element1.type = "checkbox";
   element1.name="chkbox[]";
   cell1.appendChild(element1);

   var cell2 = row.insertCell(1);
   cell2.innerHTML = rowCount + 1;

   var cell3 = row.insertCell(2);
   var element2 = document.createElement("input");
   element2.type = "text";
   element2.name = "txtbox[]";
   cell3.appendChild(element2);


  }

  function deleteRow(tableID) {
   try {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;

   for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
     table.deleteRow(i);
     rowCount--;
     i--;
    }


   }
   }catch(e) {
    alert(e);
   }
  }

 </SCRIPT>
</HEAD>
<BODY>

 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

 <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

 <TABLE id="dataTable" width="350px" border="1">
  <TR>
   <TD><INPUT type="checkbox" name="chk"/></TD>
   <TD> 1 </TD>
   <TD> <INPUT type="text" /> </TD>
  </TR>
 </TABLE>

</BODY>
</HTML>

Code language: JavaScript (javascript)
For adding dynamic row in table, we have used insertRow() method. This method will insert a row at position specified by the index arguement. Also for removing row, we have used deleteRow() method. Note that for inserting dynamic row, we have to created cells by using row.insertCell() method. Check the online demo.

Online Demo

 Click here.

Add/Remove rows from table having Drop Down List

What if my table has a selectbox or drop down list and I want to implement add/remove row functionality? A lot of people asked me this question (you can check comment section), so I thought to update this article and add one more case. Adding / Removing rows in a table having drop down list. Following is the code: 
<HTML>
<HEAD>
 <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
 <SCRIPT language="javascript">
  function addRow(tableID) {

   var table = document.getElementById(tableID);

   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);

   var colCount = table.rows[0].cells.length;

   for(var i=0; i<colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch(newcell.childNodes[0].type) {
     case "text":
       newcell.childNodes[0].value = "";
       break;
     case "checkbox":
       newcell.childNodes[0].checked = false;
       break;
     case "select-one":
       newcell.childNodes[0].selectedIndex = 0;
       break;
    }
   }
  }

  function deleteRow(tableID) {
   try {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;

   for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
     if(rowCount <= 1) {
      alert("Cannot delete all the rows.");
      break;
     }
     table.deleteRow(i);
     rowCount--;
     i--;
    }


   }
   }catch(e) {
    alert(e);
   }
  }

 </SCRIPT>
</HEAD>
<BODY>

 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

 <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

 <TABLE id="dataTable" width="350px" border="1">
  <TR>
   <TD><INPUT type="checkbox" name="chk"/></TD>
   <TD><INPUT type="text" name="txt"/></TD>
   <TD>
    <SELECT name="country">
     <OPTION value="in">India</OPTION>
     <OPTION value="de">Germany</OPTION>
     <OPTION value="fr">France</OPTION>
     <OPTION value="us">United States</OPTION>
     <OPTION value="ch">Switzerland</OPTION>
    </SELECT>
   </TD>
  </TR>
 </TABLE>

</BODY>
</HTML>

Code language: JavaScript (javascript)
Check the addRow() method in above code. I have edited this piece of code from our previous example. The addRow() method iterates through all the columns and copy the content of 1st column to new column. This way a new row is created which is exact copy of 1st row. Also the switch{} case in the code make sure that the value are not copied as it is. For example, if you have entered text “abc” in textbox of 1st row and you press Add Row button, the new row will be added and the textbox of this new row will have value “abc”. So to make sure the values are not copied, we have added the switch{} code. You may want to comment the switch{} code if the copying of the values in newly added row if desired to you.

Online Demo

 Click here.

Getting Submitted Form Values in PHP

The main purpose of above code is to take input from user and persist it in database. Hence we may want to submit the above form and fetch its values in PHP to store the data in database. If you notice we have multiple input textboxes with the same name. So in order to get these values in PHP request parameter, we need to modify our HTML. We need to append [] at the end of name of each input boxes including select box. Thus our textbox definition: 
<INPUT type="text" name="txt">

Code language: HTML, XML (xml)
Will change into: 
<INPUT type="text" name="txt[]">

Code language: HTML, XML (xml)
Also the checkbox and select box definition change to: 
<INPUT type="checkbox" name="chk[]"/>

<SELECT name="country[]">
 <OPTION value="in">India</OPTION>
 <OPTION value="de">Germany</OPTION>
 <OPTION value="fr">France</OPTION>
 <OPTION value="us">United States</OPTION>
 <OPTION value="ch">Switzerland</OPTION>
</SELECT>

Code language: HTML, XML (xml)
Once we have changed the HTML code, add a submit button at the end of the form and submit this form to Fetchrequest.php Following will be the code to get the values from request in PHP and displaying them on screen: 
<?php
$chkbox = $_POST['chk'];
$txtbox = $_POST['txt'];
$country = $_POST['country'];

foreach($txtbox as $a => $b)
  echo "$chkbox[$a]  -  $txtbox[$a]  -  $country[$a] <br />";

?>

Code language: PHP (php)
If you read this far, you should follow me on twitter here.

View Comments

  • Hello,

    Please add your site at http://www.sweebs.com. Sweebs.com is a place where other people can find you among the best sites on the internet!
    Its just started and we are collecting the best found on the net! We will be delighted to have you in the sweebs listings.

    Regards
    Kris

  • Thanks for this code, it came in handy.
    A note for everyone else.

    If you enclose a in a and try to set the innerHTML of the div to something else, it will not work in IE, but will in all other browsers.

  • hi...i have a table with header and row of input. i want to insert new row when user click on Add More Item button. Have tried above code but not working. No javascript error but no row inserted, need your advise

  • hey.. superb code!! but how to call function on generated rows, for eg : onblur so on??

  • I am trying to adapt your code so that this page

    http://www.whatsfordinner.net/meals.html

    on my site includes checkboxes so that suggested meals can be removed (and later replaced with other meals, but one step at a time). How can I reach you so that I can clarify a part of your code that I don't understand?

Leave a Comment
Share
Published by
Viral Patel
Tags: dynamic elements dynamic table html JavaScript
16 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago