Share on Google+Share on Google+

JavaScript add row to table

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:

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

Output will be displayed as:

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

Download Source Code:



Posted on: May 5, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles

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.

May 4, 2012

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); = 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.*/ }
June 6, 2012

patta ah
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