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 (6) Interesting (6) Useful (1) Boring (1) Sucks (2)

Post comment

Take it with you!

Twitter

CF Libs

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. […]
GetHostAddress January 12, 2012
Performs a DNS lookup. […]
GetFileFilterCount January 4, 2012
Accepts a directory path & a file filter. Returns number of matching files. […]
replaceSpecialChars January 4, 2012
Replaces all special characters in a string of text. […]
solrClean December 30, 2011
Like VerityClean, massages text input to make it Solr compatible. […]
rjustify2 December 21, 2011
Same as built-in RJUSTIFY, but allows optional parameter character to pad with. […]
RowColor December 21, 2011
Returns alternating color based on list of colors. […]

How to add dynamic rows in a table with javascript

Post comment

Take it with you!

Twitter

Recent Posts

Categories

Tags

Archives

CF Libs