Sunday, January 23, 2011

Test no.1: Displaying data with string based dom element creation in JavaScript

Test no.1: Displaying data with string based dom element creation in JavaScript


please read the Part.1 before continu


Now by using the JSON object when window.onload function will be called a function will pass the function to create function. This function will first save the starting time in a variable and then generates the 100 tables. Then this will save the end time. Time difference will then calculated and displayed on top of tables. and following is the sample code for generating the tables using string based operations.

window.onload = function () { DisplayEmployees(jsonData); }
var startTime;
var endTime;
var totalTables = 100;
function DisplayEmployees(data) {
startTime = new Date();
for (var i = 0; i < totalTables; i++) {
document.getElementById("dvMain").innerHTML = document.getElementById("dvMain").innerHTML+Table(data);
}
endTime = new Date();
var timeSpend = new Date(endTime - startTime);
document.getElementById("dvTime").innerHTML = "Time Spent to generate "+totalTables+" in Minute : Seconds : MilliSeconds = " + timeSpend.getMinutes() + ":" + timeSpend.getSeconds() + ":" + timeSpend.getMilliseconds();


}
function Table(data) {

var table = "<table cellpadding='0' cellspacing='0' border='1'>";
for (var i = 0; i < data.length; i++) {
table += Row(data[i]);
}
table += "</table>";
return table;
}
function Row(rowData) {
var tr = "<tr>";
for (var i in rowData) {
tr += "<td>" + rowData[i] + "</td>";
}
tr += "</tr>";
return tr;
}

The following picture shows you the result of this script



Continue for Part no.3

No comments:

Post a Comment