You are here: Home » Programming & Computer » Miscellaneous » Add Row of Table Dynamically with DOM

Add Row of Table Dynamically with DOM


If you were to add a row of table dynamically without refreshing your form or web page, DOM (Document Object Model) scripting will be one of the good alternative you are looking for. Basically, this scripting extensively used the combination of javascript and HTML.

Definition of Document Object Model [sourced from]

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

Figure1: Add a row of dropdownlist in the table dynamically

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>DOM - Document Object Model</title>
<table id='addR' border='0' width='60%' cellspacing='1px' cellpadding='1px'>
	<td width='7%'>Fruits:&nbsp;</td>
		<select id='frt0' name='frt0' style='width: 180px'>
			<option value='A' />Apple
			<option value='B' />Banana
<input type='button' name='btnAddRow' onclick="addRow()" value='Add More ?'/>

<script language='javascript' type='text/javascript'>

function addRow(){

	var tbl = document.getElementById('addR');		//table
	var tb = tbl.getElementsByTagName('tbody')[0];	//table body
	var tr = document.createElement('tr');			//table row
	var z = tbl.rows.length; = 'tr'+z; //assigned row with an unique id
	//First column
	var td21 = document.createElement('td');
   	var col21 = document.createTextNode('Fruits: ');
   	td21.appendChild(col21);	//insert the text to first column
   	//Second Column: dropdownlist
   	var td22 = document.createElement('td'); = 'td'+z;
   	var dd22 = document.createElement('select');'180px';
	dd22.setAttribute('name', 'frt'+z);
	dd22.setAttribute('id', 'frt'+z);
	var fruit = ['A','B'];	
	var fruitName = ['Apple','Banana'];
	for (var x=0; x < fruit.length; ++x){

		opt22 = document.createElement('option')
		opt22.value = fruit[x]




Figure2: dom-add-row.html

Learn more at:-

**Don’t forget to support my Blog by clicking at Donate!!**


Leave a Reply

Your email address will not be published. Required fields are marked *