SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict ArunB's Avatar
    Join Date
    Jun 2008
    Location
    Hyderabad
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Forming a HTML table from XML Content

    Hi, I am parsing a AJAX XML response using jQuery and creating a table with data in it.

    First I am creating a table, then traversing through the XML nodes using jQuery using the each() function and in this function, I am creating the tr's (table rows) and appending them to the table body (tbody). The problem here is, if I have more number of records(200 or more), then I am not able to see the contents(records) in table until rendering of all the rows is completed.

    But when I use debugger and put a break point at the end of the each function, this time execution will stop there and I am able to see the row added.

    How can I solve this problem?

    Thanks in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You could perform the adding of table rows in a batched process, and use setTimeout to process the next set of rows to be added.

    This way the rendered code has an opportunity to be updated.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict ArunB's Avatar
    Join Date
    Jun 2008
    Location
    Hyderabad
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am wondering, will it take more time than it is currently taking...?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    That can depend on what the browser is doing,

    Here's some very rough code that compares creating a table all in one go, versus batch-processing the task 10 rows at a time.

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Test</title>
    	<style type="text/css">
    	#container {
    		padding: 0.5em;
    	}
    	#singleTask {
    		float: left;
    		width: 50%;
    	}
    	table {
    		border: 1px solid blue;
    	}
    	td {
    		border: 1px solid black;
    	}
    	</style>
    </head>
     
    <body>
    <h1>Task Type Test</h1>
    <div id="container">
    	<div id="singleTask">
    		<h2>Single task</h2>
    		<button id="createTableSingleTask">Create Table As Single Task</button>
    	</div>
    	<div id="multipleTask">
    		<h2>Multiple tasks</h2>
    		<button id="createTableMultipleTask">Create Table As Multiple Tasks</button>
    	</div>
    </div>
    <script type="text/javascript">
    document.getElementById('createTableSingleTask').onclick = createTable;
    document.getElementById('createTableMultipleTask').onclick = startCreateTable;
    totalRows = 100;
    totalCols = 100;
     
    function createTable(evt) {
    	evt = evt || window.event;
    	var targ = evt.target || evt.srcElement;
    	var p = document.createElement('p');
    	var timeStart = new Date();
    	var timeStop;
    	removeContentAfter(targ);
    	targ = targ.parentNode;
    	appendTable(targ, totalRows, totalCols);
    	timeStop = new Date();
    	targ.appendChild(p);
    	p.appendChild(document.createTextNode(timeStop - timeStart + ' milliseconds'));
    }
    function startCreateTable(evt) {
    	evt = evt || window.event;
    	var targ = evt.target || evt.srcElement;
    	removeContentAfter(targ);
    	targ = targ.parentNode;
    	targ.p = document.createElement('p');
    	targ.timeStart = new Date();
    	processCreateTable(targ, totalRows, totalCols, function (el) {
    		return function () {
    			finishCreateTable(el);
    		}
    	}(targ));
    }
    function removeContentAfter(el) {
    	var parent = el.parentNode;
    	console.log('lastChild is' + parent.lastChild);
    	while (parent.lastChild !== el) {
    		console.log('removing ' + parent.lastChild);
    		parent.removeChild(parent.lastChild);
    		console.log('lastChild is' + parent.lastChild);
    	}
    }
    function finishCreateTable(el) {
    	el.timeStop = new Date();
    	el.appendChild(el.p);
    	el.p.appendChild(document.createTextNode(el.timeStop - el.timeStart + ' milliseconds'));
    }
    function appendTable(el, rows, cols) {
        var table = document.createElement('table');
    	var tbody = document.createElement('tbody');
    	el.appendChild(table);
    	table.appendChild(tbody);
    	var i;
    	for (i = 0; i < rows; i += 1) {
    		tbody.appendChild(createTableRow(cols));
    	}
    }
    function createTableRow(cols) {
    	var tr = document.createElement('tr');
    	var i;
    	for (i = 0; i < cols; i += 1) {
    		td = document.createElement('td');
    		td.appendChild(document.createTextNode(' '));
    		tr.appendChild(td);
    	}
    	return tr;
    }
    function processCreateTable(el, rows, cols, callback) {
        el.table = document.createElement('table');
    	el.appendChild(el.table);
    	el.tbody = document.createElement('tbody');
    	el.table.appendChild(el.tbody);
    	setTimeout(processRows(el, rows, cols, callback), 0);
    }
    function processRows(el, rows, cols, callback) {
    	return function () {
    		var tbody = el.tbody;
    		var i;
    		if (rows > 10) {
    			for (i = 0; i < 10; i += 1) {
    				tbody.appendChild(createTableRow(cols));
    			}
    			rows -= 10;
    			setTimeout(processRows(el, rows, cols, callback), 0);
    		} else {
    			for (i = 0; i < rows; i += 1) {
    				tbody.appendChild(createTableRow(cols));
    			}
    			callback();
    		}
    	};
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •