create dynamic HTML in JavaScript | Javascript code to add / remove rows dynamically in a table of HTML

This tutorial covers about how to add or  remove rows  in  a table of a HTML  dynamically  using javascript code .   HTML documets can be easily accessed and manipulated using HTML DOM , which represents an HTML document as a tree-structure.  When a  HTML document is  loaded in a browser window , it  becomes a Document object. Now we can use the Document object  to  access to all HTML elements  (as node objects) in a page, using  any script such as Javacript . Using  Document object ,  we can add or remove  element in the html as we do for  xml,  You can gothrough my earlier post to create xml using DOM .
              Let us see some of the following  HTML DOM properties and methods to access / modify the html documents , before writing the actual  program .

Some DOM properties:

nodeName - returns the name of an element
 nodeValue - returns the value of an element
 parentNode - returns the parent node of an element
 childNodes - returns the child nodes of element
 attributes - returns the attributes nodes of element

innerHTML -  to get or modify the content of  an element

   Suppose  x is a node object (HTML element) , the above properties can be accessed  as  x.innerHTML , x.nodeName, ....

Similarly some DOM methods:

getElementsByTagName(name) - get all elements with a specified tag name
 getElementById(id) - get the element with a specified id
 appendChild(node) - insert a child node to the element
 removeChild(node) - removes a child node from the element

eg. document.getElementById("tableId"), returns the table object.  you can insert , row & columns using the table object.
 to get the content (text)  of an element <p id="test">This is a test</p>  , you can use   innerHTML OR   childNodes and nodeValue properties with the method   getElementById

txt = document.getElementById("test").innerHTML;
 or
  txt=document.getElementById("test").childNodes[0].nodeValue;

Now let us design HTML table  and write javascript code to add or remove rows in a table .   Consider the web page to accept passenger details and child passenger details for booking ticket in a train or bus .

To accept  , passenger details , we need to  insert  rows and cloumns in a table ,  based on the first row  of the table.  The first row is mandatory to accept atleast one passenger details .



Table design with one row and heading



<H1>Passengers Details</H1>


    <TABLE id="PDetailsTable" width="350px" border="1">

     <tr>

       <td>SNO</td>

       <td>Name</td>

       <td>Age</td>

       <td>Gender</td>

       <td>Food Preference</td>

       <td>Berth Preference</td>

       <td>Senior Citizen</td>

       <td>Select to Delete</td>

   </tr>    



        <tr>



            <td> 1 </td>



            <td> <input type="text" name="name" /> </td>

            <td> <input type="text" name="age" /> </td>

            <td>  <select name="Gender">

                     <option value="M">Male</option>

                    <option value="F">Female</option>

                  </select>

           </td>

               

            <td> <select name="Food">

                    <option value="v">Veg</option>

                    <option value="nv">Non-Veg</option>

                </select>

            </td>

              

            <td> <select name="BerthPreference">

                    <option value="l">Lower</option>

                    <option value="m">Middle</option>

                    <option value="u">Upper</option>

                    <option value="sl">Side Lower</option>

                    <option value="su">Side Upper</option>

                </select> </td>

              

            <td><input type="checkbox" name="SCchk" /></td>

          

             <td><input type="checkbox" name="delchk" /></td>



        </tr>    </TABLE> 


Two input  buttons to call   addPassenger function  to insert dynamic row and to call deletePassengerRow  to remove row from the table dynamically.
  


   <input type="button" value="Add More Passengers" onclick="addPassenger('PDetailsTable')" />

    <input type="button" value="Delete Row" onclick="deletePassengerRow('PDetailsTable')" /> 

Two javascript functions  to add and remove dynamic rows and columns  and one more function ( arrangeSno)  to arrange serial numbers when the row is removed from the table are as follows




to arrange serial numbers



 function arrangeSno(tableId)

 {

             var tblObj = document.getElementById(tableId);

             var no_of_rows = tblObj.rows.length;

              for(var i=0; i<no_of_rows-1; i++)

           tblObj.rows[i+1].cells[0].innerHTML = i+1;

 }



To add rows dynamically based on the first row in a table



      function addPassenger(tableId) {


            var tblObj = document.getElementById(tableId);


            var no_of_rows = tblObj.rows.length;
    

// to insert single row

            var row_in_table = tblObj.insertRow(no_of_rows);


// to get the number of colums from the first row


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


// to increment sno from the previous row by one

           var rno=eval(tblObj.rows[no_of_rows-1].cells[0].innerHTML) +1;


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


// to insert one column

               var column_in_row = row_in_table.insertCell(i);



                column_in_row.innerHTML = tblObj.rows[1].cells[i].innerHTML;

              

                if (i==0)  column_in_row.innerHTML = rno;



// to fill new row with  blank  text box, unchecked checkbox ,  combo selected with index 0 when the row is created , eventhough  the first row of the table having the textbox with filled values , etc...



                switch(column_in_row.childNodes[0].type) {

                    case "text":

                            column_in_row.childNodes[0].value = "";

                            break;

                    case "checkbox":

                            column_in_row.childNodes[0].checked = false;

                            break;

                    case "select-one":

                            column_in_row.childNodes[0].selectedIndex =0;

                            break;

                }

            }

        }





To remove rows dynamically  from the table .



        function deletePassengerRow(tableId) {

                    var tblObj = document.getElementById(tableId);

   
                 var delchkbox=document.bookingForm.delchk;    // where bookingForm is the form name


        var no_of_rows = delchkbox.length;

         for(var i=0; i<no_of_rows;i++)

         {

// heading and atleast one row should be in the table

         if (delchkbox[i].checked && tblObj.rows.length>=3)

         {

             tblObj.deleteRow(i+1);

                 no_of_rows--;

      i--;

          }

                }


          arrangeSno(tableId);        } 


To accept  ,child  passenger details ,  we are creating  elements like textbox , checkbox , dropdown list dynamically. These elements are inserted in the table's columns in a row  as a child element . Table rows and columns are also created dynamically . No row is mandatory . Table heading is displayed , if the table has atleast one row , otherwise , table heading is hidden.

Table design with heading without any initial rows



<H1>Child Passengers Details</H1>

  

    <TABLE id="childPassTable" width="350px" border="1" style="visibility:hidden" >

        <tr>

         <td>SNO</td>

         <td>Name</td>

         <td>Age</td>

         <td>Gender</td>

         <td>Select to delete</td>

    </tr>         </TABLE> 

Two buttons to call  addRowForChild &  deleteRowChild




 <P> <input type ="button" value="Add Child Passengers"  onclick="addRowForChild('childPassTable')">  <input type="button" value="Delete Row" onclick="deleteRowChild('childPassTable')"></P> 

Two javascript functions to add rows / remove rows in a table  and to create textbox , checkbox , combo box dynamically  for accepting child passenger details  .



    function addRowForChild(tableId) {



            var tblObj = document.getElementById(tableId);


            var no_of_rows = tblObj.rows.length;


// to make visible of the header row of the table , if the table has atleast one row
            if(no_of_rows==1)

             tblObj.style.visibility="visible";



// to insert one row of the table

            var row_in_table = tblObj.insertRow(no_of_rows);


//to insert the first column (for SNO)

            var column1 = row_in_table.insertCell(0);



      if (no_of_rows==1) 
         var rno=1;

     else
        var rno=eval(tblObj.rows[no_of_rows-1].cells[0].innerHTML) +1;


            column1.innerHTML = rno;


//to insert the second column (for textbox to accept name)

            var column2 = row_in_table.insertCell(1);

            var element2 = document.createElement("input");

            element2.setAttribute("name", "nameChild");  //to set name of the text box

            element2.type = "text";

            column2.appendChild(element2);


 //to insert the second column (for textbox to accept age)
            var column3 = row_in_table.insertCell(2);

            var element3 = document.createElement("input");

            element3.setAttribute("name", "ageChild");

            element3.type = "text";

            column3.appendChild(element3);


 //to insert the fourth column (for combo box to select gender)

            var column4 = row_in_table.insertCell(3);

            var combo = document.createElement("select");

            combo.setAttribute("name", "genderChild");

            var option = document.createElement("option");

            combo.options[0] = new Option("Male", 1);

             combo.options[1] = new Option("Female", 2);

            column4.appendChild(combo);

// to insert the fifth column (for check box )          

            var column5 = row_in_table.insertCell(4);

           var element5 = document.createElement("input");

            element5.type="checkbox";

            column5.appendChild(element5);

          

        }




       function deleteRowChild(tableId) {


            var tblObj = document.getElementById(tableId);

            var no_of_rows = tblObj.rows.length;


            var i=0;

            while (i<no_of_rows)

            {

                var row_in_table = tblObj.rows[i];

                var chkbox = row_in_table.cells[4].childNodes[0];

                if( chkbox !=null &&  chkbox.checked==true) {

                    tblObj.deleteRow(i);

                    no_of_rows--;

                    i--;

// to hide the table heading , if there is no row

            if(no_of_rows<=1) tblObj.style.visibility="hidden";

                }

                i++;

                }

              

             arrangeSno(tableId);

                   } 





Sample code to send / pass /  process the elements created  dynamically  in the page  to server side.            



  String[] names=request.getParameterValues("name");

  

  String[] birthPreference=request.getParameterValues("BerthPreference");



  String[] nameChild=request.getParameterValues("nameChild");

   .....

   .....

   .....

       for (int i = 0; i < names.length; i++)

    

          System.out.println("Name=" + names[i] + " Birth Preferance= " +  birthPreference[i] );

  

   .......   ........