Skip to main content

Dynamically Add/Remove Rows in HTML Table Using Javascript

Following code snippet will show how to dynamically add/remove rows in Table using simple HTML and Javascript :

Source Code :
 HTML Table :  
   
 <table cellspacing=0 cellpadding=0 border=0 border-spacing=10px id="attributes_configuration_table">  
   <thead>    
     <tr>          
       <th><b>Name</b></th>             
       <th><b>Value</b></th>    
     </tr>  
   </thead>  
   <tbody>    
       <tr id="row_1">          
       <td>            
         <input type="text" name="attribute_name_1" id="attribute_name_1" style="margin-right:10px" autocomplete="off">                  
     </td>              
       <td>            
         <input type="text" name="attribute_value_1" id="attribute_value_1" style="margin-right:10px" autocomplete="off">          
       </td>        
       <td><input class="new_button" id="+" name="+" onclick="addTableRow('attributes_configuration_table')" type="button" value="+">  
       </td>    
     </tr>  
   </tbody>  
 </table>  

JavaScript :
 var counter = 1;  
 function addTableRow(TableId) {  
   var table = document.getElementById(TableId);  
   counter++;  
   var rowCount = table.rows.length;  
   var row = table.insertRow(rowCount);  
   row.id = 'row_' + counter;  
   
   var cell1 = row.insertCell(0);  
   var element1 = document.createElement("input");  
   element1.type = "text";  
   element1.autocomplete = "off";  
   element1.name="attribute_name_" + counter;  
   cell1.appendChild(element1);   
   
   var cell2 = row.insertCell(1);  
   var element2 = document.createElement("input");  
   element2.type = "text";  
   element2.autocomplete = "off";  
   element2.name="attribute_value_" + counter;  
   cell2.appendChild(element2);  
       
   var cell3 = row.insertCell(2);  
   var newButton    = document.createElement("input");  
   newButton.className = "new_button";  
   newButton.type   = "button";  
   newButton.value   = '-';  
   newButton.onclick  = removeRow;  
   cell3.appendChild(newButton);  
 }  
   
 function removeRow (id) {  
   var rowNode = this.parentNode.parentNode;  
   // Delete this node  
   rowNode.parentNode.removeChild(rowNode);  
 }  

Live Demo

Comments

Popular posts from this blog

Sakleshpur - The Green Route Railway Trek, Waterfalls, Jungle Adventures and Much More

The breathtaking images of picturesque railway route from Sakleshpur to Kukke Subramanya captivated us to go for this trek. We had been planning to do "The Green Route trek" - that's what it is called, from last few months and then finally the day has come and we started for our journey to Sakleshpur - also referred as "Poor Man's Ooty". We read some news about the ban on trekking in western ghats. But we were not sure if it is really banned. Before the conversion of the railway line from meter gauge to broad gauge along the Sakleshpur railway line in Karnataka’s Hassan district, it was one of the most sought-after trek routes. 1, 2, 3 - Smile 1, 2, 3 - Smile We started our journey from Bangalore on Friday evening, had dinner enroute in a dhaba near Hassan and reached Sakleshpur at around the Midnight, Checked into Hotel. Next morning, We talked to some local people and We came to know "The Green Route" Trek is banned for sure. Bu

Dudhsagar Falls - An exhilarating rail trek in the picturesque Western Ghats

Usually the trips we plan gets finalized at the last moment - making all the bookings a day or two before. But, For this trip we just changed the usual way. This was a well-planned one. We had booked train tickets and stay almost a month in advance. We boarded the train from Bangalore City station. We had our reservation in  Rani Chennamma Express  till Londa Junction. We reached Londa Junction at around 8:30 AM. We had breakfast at the station - Vada Pav and Idli Vada - were only things available there. Then, we bought General tickets and boarded  Chennai Vasco Express  at around 9:00 AM. We reached Castle Rock at around 10:00 AM. Bon Voyage - @Bangalore City Railway Station We started our expedition From Castle Rock at around 10:30 AM. Weather was awesome - drizzling with cool breeze. View was awesome all the way - full of Jungles, Mountains, small and big waterfalls. The rail trek was an ultimate experience amidst the beautiful Western Ghats. Londa Junction - Int

Yes, You heard it right - Rohit Sharma does it Again

Eden Gardens’ 150 years celebration could not be better than this. No one would have thought that this day will be written in golden letters in the history of ODI cricket. Cricket fans, who were watching this match from the stands, will cherish this day for their lifetime. Returning from injury, Rohit Sharma played a fabulous inning of 264 in 173 balls in 4 th ODI against Sri Lanka on 13 th November, 2014. He was not out until the last ball of India’ inning was bowled. He falls off the last ball of the innings trying to play a big shot. Rohit Sharma was on 4 when he was dropped by Thisara Perera at third man. India Scored 405/5 altogether and in their effort to chase such a big total, Guests could garner a meagre 251 and lost by 153 runs. India leads 4-0 (undefeatable) in the 5 match ODI series. Rohit Sharma Celebrating his double hundred at Eden Gardens, Kolkata It was his first international match after he injured himself in the second ODI against England in Au