How to insert A row Dynamically in a table

on
In this article we are going to see how to insert a row dynamically in a table  and on click of the row are are going convert all the cells in to Editable ?

Step 1: Create a Simple HTML file as follows .


 <html>  
 <head>  
      <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">  
 </head>  
 <body>  
      <div class="container">  
           <table class="table table-striped" id="table">  
                <tr>  
                     <th>First Name</th>  
                     <th>Last Name</th>  
                     <th>Email</th>  
                </tr>  
                <tr>  
                     <td>Murali</td>  
                     <td>Krishna</td>  
                     <td>mk@gmail.com</td>  
                </tr>  
                <tr>  
                     <td>Leela</td>  
                     <td>Vathis</td>  
                     <td>lkm@gmail.com</td>  
                </tr>  
                <tr>  
                     <td>Hema</td>  
                     <td>Sekar</td>  
                     <td>hema@gmail.com</td>  
                </tr>  
                <tr>  
                     <td>ram</td>  
                     <td>Kumar</td>  
                     <td>ram@gmail.com</td>  
                </tr>  
           </table>  
           <hr>  
           <br>  
           <div class="col-md-6">  
           <select id="position" class="form-control">  
                <option value="1">1</option>  
                <option value="2">2</option>  
                <option value="3">3</option>  
                <option value="4">4</option>  
           </select>  
           <br>  
                <table class="table table-striped">  
                     <tr>  
                          <td>First Name</td><td><input type="text" class="form-control" id="fname"></td>  
                     </tr>  
                     <tr>  
                          <td>last Name</td><td><input type="text" class="form-control" id="lname"></td>  
                     </tr>  
                     <tr>  
                          <td>Email</td><td><input type="text" class="form-control" id="email"></td>  
                     </tr>  
                     <tr>  
                          <td></td><td><input type="button" class="btn btn-info" value="Add" onclick="add()"></td>  
                     </tr>  
                </table>  
           </div>  
      </div>  
 </body>  
 </html>

we Should get output like follows:

 
 Lets create a function to capture the values from a form to insert in a table  and assign it to the add button . 


 function add(){  
                // capture the value from Drowdown to insert the Row.  
                var position=document.getElementById("position").value  
                var table=document.getElementById("table")  
                // Capture the Details from the form to insert in Row  
                var person={  
                     fname:document.getElementById("fname").value,  
                     lname:document.getElementById("lname").value,  
                     email:document.getElementById("email").value  
                }  
                //Insert the Row   
                var row=table.insertRow(position);  
                //Insert the cells in row   
                var cell1=row.insertCell(0);  
                var cell2=row.insertCell(1);  
                var cell3=row.insertCell(2);  
                //Insert the Values in Cells   
                cell1.innerHTML=person.fname;  
                cell2.innerHTML=person.lname;  
                cell3.innerHTML=person.email;  
           }

you can download full code here



Comments

Post a Comment