Display XML content in HTML table
|
|
|
|
|
<!-- ***********************************************************
Example 5-12
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O'Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.com
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Embedding External XML Data</title>
<style type="text/css">
body {background-color:#ffffff}
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px}
th {border:2px groove black; padding:7px}
.ctr {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// global reference to XML document object
var xDoc;
// Draw table from xDoc document tree data
function drawTable(tbody) {
var tr, td, i, j, oneRecord;
tbody = document.getElementById(tbody);
// node tree
var data = xDoc.getElementsByTagName("season")[0];
// for td class attributes
var classes = ["ctr","","","","ctr"];
for (i = 0; i < data.childNodes.length; i++) {
// use only 1st level element nodes
if (data.childNodes[i].nodeType == 1) {
// one bowl record
oneRecord = data.childNodes[i];
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("number")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue + " - " + oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
}
}
}
// verify that browser supports XML features and load external .xml file
function verifySupport(xFile) {
if (document.implementation && document.implementation.createDocument) {
// this is the W3C DOM way, supported so far only in NN6
xDoc = document.implementation.createDocument("", "theXdoc", null);
} else if (typeof ActiveXObject != "undefined") {
// make sure real object is supported (sorry, IE5/Mac)
if (document.getElementById("msxml").async) {
xDoc = new ActiveXObject("Msxml.DOMDocument");
}
}
if (xDoc && typeof xDoc.load != "undefined") {
// load external file (from same domain)
xDoc.load(xFile);
return true;
} else {
var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.n nGo back to previous page?");
if (reply) {
history.back();
}
}
return false;
}
// initialize first time -- invoked onload
function init(xFile) {
// confirm browser supports needed features and load .xml file
if (verifySupport(xFile)) {
// let file loading catch up to execution thread
setTimeout("drawTable('bowlData')", 1000);
}
}
</script>
</head>
<body onload="init('superBowls.xml');">
<h1>Super Bowl Games</h1>
<hr>
<table id="bowlGames">
<thead>
<tr><th>Bowl</th>
<th>Year</th>
<th>Winner</th>
<th>Loser</th>
<th>Score (Win or Lose)</th>
</tr>
</thead>
<tbody id="bowlData"></tbody>
</table>
<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->
<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body>
</html>
|
|
|
|
|
Related Scripts with Example Source Code in same category :
-
-
-
-
|
|
