Dec

How to add dynamic rows in a table with javascript

nerdscubecom Category

design, dynamic, element creation, HTML, Javascript, web development

A good web design involves the better user interaction and ability to fetch the data in a better way. For most User experience in your site, you have to ease out the user actions like form filling, searching etc.

Adding dynamic elements in you page at runtime reduces page refresh, page load delay and wont question user patients. You can achieve these flexibility in you site by using javascript and html. Javascript can be used to add new elements at runtime.

for instance , if you want to add a new text box below your country selection if the user could not find the right country in the list. the below code will create a html page with javascript that create new row at runtime on click of the add button

<HTML>
<HEAD>
	<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
	<SCRIPT language="javascript">
		function addRow(tableID) {
 
			var table = document.getElementById(tableID);
 
			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);
 
			var cell1 = row.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			cell1.appendChild(element1);
 
			var cell2 = row.insertCell(1);
			cell2.innerHTML = rowCount + 1;
 
			var cell3 = row.insertCell(2);
			var element2 = document.createElement("input");
			element2.type = "text";
			cell3.appendChild(element2);
 
		}
 
		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;
 
			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}
 
			}
			}catch(e) {
				alert(e);
			}
		}
 
	</SCRIPT>
</HEAD>
<BODY>
 
	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 
	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 
	<TABLE id="dataTable" width="350px" border="1">
		<TR>
			<TD><INPUT type="checkbox" name="chk"/></TD>
			<TD> 1 </TD>
			<TD> <INPUT type="text" /> </TD>
		</TR>
	</TABLE>
 
</BODY>
</HTML>

For adding dynamic row in table, we have used insertRow() method. This method will insert a row at position specified by the index arguement. Also for removing row, we have used deleteRow() method.
Note that for inserting dynamic row, we have to created cells by using row.insertCell() method

For online demo check the link
http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

What do you think of this post?

Awesome (7) Interesting (6) Useful (1) Boring (1) Sucks (2)

Post comment

Take it with you!

Twitter

CF Libs

getComponentProps May 18, 2012
Returns an array of all properties in cfc's metadata, inherited or not. […]
iniToStruct April 26, 2012
Converts ini file(s) to a struct. […]
deDupeArray April 26, 2012
Removes duplicate values from an array. […]
dice April 24, 2012
Divide a string in parts of equal size with separators in between/ […]
getRelative April 9, 2012
Returns a relative path from the current template to an absolute file path. […]
excelRate February 23, 2012
Returns the interest rate per period of an annuity. […]
arrayTrim January 31, 2012
This method trims an array to the specified number of elements. […]
longTime January 25, 2012
Returns a list like 3 years, 2 months, 12 days, 1 hour, 10 minutes, 45 seconds from a seconds count argument. […]
quickSort January 15, 2012
Implementation of Hoare's Quicksort algorithm for sorting arrays of arbitrary items. […]

How to add dynamic rows in a table with javascript

Post comment

Take it with you!

Twitter

Recent Posts

Categories

Tags

Archives

CF Libs