Test no.2: Displaying data with jQuery based dom element creation in JavaScript/jQuery

Please read
Part no.1 and

Part no.2 before reading this Part no.3

This is the same as test no.1 the only difference is the use of jQuery instead of string for creation of Dom elements.

"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."

$(function () { DisplayEmployees(jsonData); });
var startTime;
var endTime;
var totalTables=100;

function DisplayEmployees(data) 
{
  startTime = new Date();
  var mainDiv = $("#dvMain");
  for (var i = 0; i < totalTables; i++) 
  {
    mainDiv.append(Table(data));
  }

  endTime = new Date();

  var timeSpend = new Date(endTime - startTime);

  $("#dvTime").text("Time Spent to generate " + totalTables + " in Minute : Seconds : MilliSeconds = " + timeSpend.getMinutes() + ":" + timeSpend.getSeconds() + ":" + timeSpend.getMilliseconds());
}

function Table(data) 
{
  var table = $("<table></table>").attr({ cellpadding:'0',cellspacing:'0', border:'1'});

  for (var i = 0; i < data.length; i++) 
  {
    table.append(Row(data[i]));
  }
  return table;
}


function Row(rowData) 
{
  var tr = $("<tr></tr>");
  for (var i in rowData) 
  {
    tr.append($("<td></td>").text(rowData[i]));
  }
  return tr;
}

The following picture shows you the result of this script

Continue to Part no.4