Append rows and controls into table elements with javascript dynamically

Introduction

This article explains the way to Add rows and controls in HTML table element dynamically, It is useful to add or append row and form controls in the web page using javascript, Like when we need a button to add number of new rows having form controls in web page. I found this code very helpful, when user have option to add/Edit multiple records by adding new html controls dynamically on button click. Rows and Controls will be added without even refresh of page and update this information in database using Ajax Technology. Use of this code is very easy, It is just combination of HTML and javascript. On the onclick event of href link or button, call javascript AppendRow() function and it will add number of controls dynamically in the page.

Javascript to Add Rows and Controls

Help code is attched with this article. Call AppedRow() function on click of button. I have added textbox, checkbox and dropdown controls using javascript in the newly added row.
AppendTD() function is used to add a cell in the newly created row.

function AppendTD()
{
var td = document.createElement("td");
td.className='';
td.setAttribute("height", "24px");
return td;
}

Here get the reference of table element, which is already created in web page, and append rows into this referred table element.

function AppendRow()
{
var tblObj = document.getElementById('mainTable');
var tblBody = tblObj.childNodes;
var ttlRows = tblBody[0].childNodes.length;
var index = ttlRows;
var cellHTML = "";
var tr = document.createElement('tr');
//adding first column
var td = AppendTD();
//adding checkbox to first column
var chk = document.createElement('input');
chk.setAttribute("id", "chk"+index);
chk.setAttribute("name", "chk"+index);
chk.setAttribute("type", "checkbox");
td.appendChild(chk);
tr.appendChild(td);
//adding second column
var td = AppendTD();
//adding text box
var txt = document.createElement('input');
txt.setAttribute("id", "txt"+index);
txt.setAttribute("name", "txt"+index);
txt.setAttribute("type", "text");
td.appendChild(txt);
tr.appendChild(td);
var td = AppendTD();
var sel = document.createElement('select');
sel.setAttribute("id", "dd"+index+"1");
sel.setAttribute("name", "dd"+index+"1");
sel.className='';
var opt0 = document.createElement("option");
var t0 = document.createTextNode("Yes");
opt0.setAttribute("value", "1");
opt0.appendChild(t0);
sel.appendChild(opt0);
var opt1 = document.createElement("option");
var t1 = document.createTextNode("No");
opt1.setAttribute("value", "2");
opt1.appendChild(t1);
sel.appendChild(opt1);
td.appendChild(sel);
tr.appendChild(td);
tblBody[0].appendChild(tr);
return false;
}

Link to download sample application
http://www.codeproject.com/KB/scripting/appendRow.aspx

.

Ajax

The term Ajax, which stands for Asynchronous JavaScript and XML.
Ajax is an approach or pattern to web development that uses client-side scripting to exchange data with a web server. This approach enables pages to be updated dynamically without causing a full page refresh to occur.

Ajax components
As we previously mentioned, the Ajax programming pattern consists of a set of existing technologies brought together in an imaginative way, resulting in a richer and more engaging user experience. The following are the main pillars of the Ajax programming pattern and the role they play in its model:

■ JavaScript—A scripting language that is commonly hosted in a browser to add interactivity to HTML pages. Loosely based on the C programming language, JavaScript is the most popular scripting language on the Web and is supported by all major browsers. Ajax applications are built in JavaScript.
■ Document Object Model (DOM) —Defines the structure of a web page as a set of programmable objects that can be accessed through JavaScript. In Ajax programming, the DOM is leveraged to effectively redraw portions of the page.
■ Cascading Style Sheets (CSS)—Provides a way to define the visual appearance of elements on a web page. CSS is used in Ajax applications to modify the exterior of the user interface interactively.
■ XMLHttpRequest—Allows a client-side script to perform an HTTP request. Ajax applications use the XMLHttpRequest object to perform asynchronous requests to the server as opposed to performing a full-page refresh or postback.

1. Instantiating the XMLHttpRequest object

var xmlHttp = null;
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
}
catch(e) {}
}

Now that the object has been instantiated, you can use it to make an asynchronous request to a server resource. To keeps things simple, you can make a request to another page called Welcome.htm

<body> <div> Welcome to ASP.NET AJAX In Action!</div> <body>

2 . Sending an asynchronous request

function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open("GET", url, true); // true = async
xmlHttp.onreadystatechange = onCallback;
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlHttp.send(null);
}
}

The sendRequest method takes as a parameter the URL to which you’ll be making an HTTP request. Next, it opens a connection with the asynchronous flag set to true. After the connection is initialized, it assigns the onreadystatechange property of the XMLHttpRequest object to a local function called onCallback. Remember, this will be an asynchronous call, which means you don’t know when it will return. A callback function is given so you can be notified when the request is complete or its status has been updated. After specifying the content type in the request header, you call the send method to transmit the HTTP request to the server.

When the status of the request changes and the callback function is invoked, the final step is to check the status and update the user interface with the contents returned from Welcome.htm.

3. The callback function gets called every time the ready state changes for the asynchronous request.

function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
else {
alert('Error: ' + xmlHttp.status);
}
}
}

The status of the request is returned in the readyState property of the XMLHttpRequest object. The value 4 indicates that the request has completed. Next, the response from the must be checked to confirm that everything was successful. Status code 200 is designated in the HTTP protocol to indicate that a request has succeeded. Finally, the innerHTML of a span element is updated to reflect the contents in the response.