Home Javascript JavaScript add row to table

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript add row to table

Advertisement
This section illustrates you how to add a new row to the existing table using JavaScript.

JavaScript add row to table

     

This section illustrates you how to add a new row to the existing table using JavaScript.

You can see in the given example, we have created a table whose id is grabbed by the method document.getElementById(id) and stored it into the variable 'tbody'. The method createElement() creates the row element 'tr' and 'td'. As you already know that 'td' contains the table data and 'tr 'defines a row that contains the 'td' element. Now, the method appendChild(document.createTextNode()) adds the text node to the 'td' element as the table data. Then we have added the 'td' data to the row element 'tr'. When you load the page, you will get the table containing the columns Name and Address and a button 'Add row'. On clicking the button, a new row will be added to the table. 

Here is the code:

<html>
<h2>Add Row in JavaScript</h2>
<script>
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var data1 = document.createElement("td")
data1.appendChild(document.createTextNode("Column1"))
var data2 = document.createElement("td")
data2.appendChild (document.createTextNode("Column2"))
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
</script>
<table id="table" cellspacing="0" border="1">
<tbody>
<tr><td>Name</td><td>Address</td>
</tr>
</tbody>
</table><button onclick="javascript:addRow('table')">Add row</button>
</html>

Output will be displayed as:

On clicking the button, a new row is added to the table:

Download Source Code:

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



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: May 5, 2009

Related Tutorials

Discuss: JavaScript add row to table   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:4
siva
May 4, 2012
c

super
ankiit
May 19, 2012
Add Dynamic row using Javascript

function removeFormRow(childObj,iValue) { tableId = 'Id_transaction'; if(iValue) { tableId = 'Id_transaction_'+iValue; } var iRowIndex = childObj.parentNode.parentNode.rowIndex; var objTable = document.getElementById(tableId); /** creating table object*/ objTable.deleteRow(iRowIndex); } function addFormRow(Level_Id,Stu_Adm_Type_Id) { var browserName=navigator.appName; var classname; if (browserName=="Netscape") { classname = "class"; } else if(browserName=="Microsoft Internet Explorer") { classname = "className"; } tableId = 'Id_transaction'; if(Level_Id && Stu_Adm_Type_Id) { tableId = 'Id_transaction_'+Level_Id+'_'+Stu_Adm_Type_Id; } var objTable = document.getElementById(tableId); /** creating table object*/ var TotalNoOfRows = objTable.rows.length; /** retrieving no. of rows in a table*/ var LastRowIndex = TotalNoOfRows - 1; /** retrieving index of last row*/ var objCell = objTable.rows[LastRowIndex].getElementsByTagName("td"); /** creating object of columns of last row*/ /** Since we know frist column of last or each row is text box, we can get unique index no. of last row using first element of last row. *****/ var LastObjectId = objCell[0].getElementsByTagName("input")[0].id; /***** or [objCell[0].childNodes[1].id will be work] *****/ var objLastObject = LastObjectId.split("_"); var NewRowIndex = parseInt(objLastObject[objLastObject.length - 1]) + 1; /** Creating new row object and creaing cell object and set respective attributes. */ var objRow = objTable.insertRow(TotalNoOfRows); objRow.id = NewRowIndex; var objCell_1 = objRow.insertCell(0);objCell_1.setAttribute(classname,"myclass"); var objCell_2 = objRow.insertCell(1);objCell_2.setAttribute(classname,"myclass"); var objCell_3 = objRow.insertCell(2);objCell_3.setAttribute(classname,"myclass"); var objCell_4 = objRow.insertCell(3);objCell_4.setAttribute(classname,"myclass"); /** Retrieving contents of first Category combo and Tax Combo */ /** Add contents to the respective cell */ objCell_1.innerHTML="<input type='text' name='data[percent]["+Level_Id+"]["+Stu_Adm_Type_Id+"][]' class = 'textclass' size = '10' id = 'Id_form_"+NewRowIndex+"'>&nbsp;"; objCell_2.innerHTML="<input type='text' name='data[caption]["+Level_Id+"]["+Stu_Adm_Type_Id+"][]' class = 'textclass' size = '10' id = 'Id_form_"+NewRowIndex+"'>&nbsp;"; objCell_3.innerHTML="<input type='text' name='data[max_marks]["+Level_Id+"]["+Stu_Adm_Type_Id+"][]' class = 'textclass' size = '10' id = 'Id_form_"+NewRowIndex+"'>&nbsp;"; objCell_4.innerHTML="<input type='text' name='data[min_marks]["+Level_Id+"]["+Stu_Adm_Type_Id+"][]' class = 'textclass' size = '10' id = 'Id_form_"+NewRowIndex+"'>&nbsp;&nbsp;"+"<img src='"+static_javascript_webroot_path+"img/cross.gif' width='9' height='9' border='0' style='cursor:pointer;' onclick=\"removeFormRow(this,'"+Level_Id+"_"+Stu_Adm_Type_Id+"')\">"; /*if(Level_Id && Stu_Adm_Type_Id) { objCell_5.innerHTML="<img src='"+static_javascript_webroot_path+"img/cross.gif' border='0' style='cursor:pointer;' onclick=\"removeFormRow(this,'"+Level_Id+"_"+Stu_Adm_Type_Id+"')\">"; } else { objCell_5.innerHTML="<img src='"+static_javascript_webroot_path+"img/cross.gif' border='0' style='cursor:pointer;' onclick=\"removeFormRow(this)\">"; }*/ /** End of Process of Adding Row.*/ }
ruwan
June 6, 2012
hi

patta ah
padmavathi
September 5, 2012
DOM dynamic table in javascript

created one table to increment dynamic rows with a addition of two cells values. Sl.No. Item&Desc Qty Rate Amount 1 abc 2 3 6 dynamic row with add option add button and remove button these calculations are not taking place. how to do the multiplication in a DOM dynamic table
DMCA.com