Forming a HTML table from XML Content

**ArunB** · Mar 4, 2009 06:33

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.

**paul_wilkins** · Mar 4, 2009 06:55

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.

**ArunB** · Mar 5, 2009 04:08

I am wondering, will it take more time than it is currently taking...?

**paul_wilkins** · Mar 5, 2009 07:02

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>

User Tag List

Thread: Forming a HTML table from XML Content

Thread Tools

Display

Forming a HTML table from XML Content

Bookmarks

Bookmarks

Posting Permissions