Home Javascript Javascriptexamples JavaScript add row dynamically to table
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

JavaScript add row dynamically to table

Advertisement
This page discusses - JavaScript add row dynamically to table

JavaScript add row dynamically to table

       

We can add rows to the table by adding a pair of  <TR></TR> tags. If we want to add row to a table dynamically then we can also do this with the JavaScript code. In this example we will describe you how to add row dynamically to the table by the program.

To illustrate example, we have first created a HTML page and into this page we have created a table with one row. We have one button "Add Row" also. It calls method addRows() on the click event of button which is defined in the <script></script> i.e in JavaScript.

 function addRows(){
  var TABLE = document.getElementById('tableId');
  var BODY = TABLE.getElementsByTagName('tbody')[0];
  var TR = document.createElement('tr');
  var TD = document.createElement('td');
  TD.innerHTML = 'This is a new row added';
  TR.appendChild (TD);
  BODY.appendChild(TR);
 }

First line of the function takes the table element reference into a variable TABLE. In the second line of code we have created a variable BODY which takes the reference to TABLE's body. In the third and fourth line of code we have created two elements "tr" and "td" and hold their reference into variables TR and TD respectively. After having TR and TD we can add them to the table by using the appendChild() method.

TR.appendChild (TD) appends TD to the table row TR and further it can be added to the table's body BODY.appendChild(TR).

Code :

<html>
<head>
  <title>
     Add row dynamically to table
  </title>
 <script type="JavaScript">
 function addRows(){
  var TABLE = document.getElementById('tableId');
  var BODY = TABLE.getElementsByTagName('tbody')[0];
  var TR = document.createElement('tr');
  var TD = document.createElement('td');
  TD.innerHTML = 'This is a new row added';
  TR.appendChild (TD);
  BODY.appendChild(TR);
 }
 </script>
</head>
<body>
 <div style="background: #cf2255; width:'100%';" align="center">
  <font color="#ffffcc" size="12pt">
	<b>Add new row example</b>
  </font>
 </div>
 <center>
  <div style="background: #ffffcc; width:'100%';" align="center">
   <table id="tableId" border="1" cellpadding="0" 
                       cellspacing="0" width="50%">
      <tr>
         <td width="50%">This is the very first row</td>
      </tr>
   </table>
  <input type="button" onclick="addRows();" value="Add Row" />
 </div>
</center>
</body>
</html>

Output :

Before adding row, the table has its default one row with the <td></td> having text "This is the very first row". Click on "Add Row" button.

As soon as you click on the button "Add Row" it will add a new row to this table with the text in the column as "This is a new row added".

Download Source Code

       

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: JavaScript add row dynamically to table  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Sanjeet kumar Singh
June 6, 2011
Code Error

Code not working
Milin Bhole
September 23, 2011
thanks

This Script has been excellent. thanks
Nicky
March 25, 2012
created dynamic Table from Javascript

How to Created Dynamic table with javascript with the textbox and dropdownlist.
yashaswee
April 24, 2012
Adding Dyanamic row data to data table

hi!! please suggest the way to insert dyanamic row data to database
Mikhael
May 23, 2012
gratitude

this is just so incredible. your script directly answered my problem, whahha,i thank God & thank this site 4 this wonderful post.
Javier Iglesias
October 18, 2013
add row dynamically

Excellent approach. Working fine in IE10 and Chrome As a little contribution I post a change to create sequential object names. example: table content (2 rows) <tr><td><input name=input1 type=text></td></tr> <tr><td><input name=input2 type=text></td></tr> To add rows the javascript should be : <script type="text/javascript"> var nrows = 2; function addRows(){ nrows++; var nrow="<td><input name=input"+nrows+" type=text></td>"; var table = document.getElementById('tableId'); var body = table.getElementsByTagName('tbody')[0]; var tr = document.createElement('tr'); var td = document.createElement('td'); td.innerHTML = rowcontent; tr.appendChild (td); body.appendChild(tr); } </script> Best regards
Alan Francis
December 16, 2011
This is not compatible with IE browser

This is an elegant solution, however this is not working in Internet Explorer. Ive tried hard coding the tags but its nearly impossible to create a row dynamically in IE. This is not workin since im not creating the table in html, but it is automatically generated using a framework. I just have to modify the table. Could you share some insight as to how I can achieve this?
DMCA.com