Convert XML to HTML : XML « Development « JavaScript DHTML






Convert XML to HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O'Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Convert XML to HTML</title>
<style rel="stylesheet" id="mainStyle" type="text/css">

html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
    margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}

</style>
<style type="text/css">
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px; background-color:#ccffcc}
th {border:2px groove black; padding:7px; background-color:#ffffcc}
.ctr {text-align:center}
</style>
<script type="text/javascript">
var xDoc;

// 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;
}

// 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("worldcup")[0];
    // for td class attributes
    var classes = ["ctr","","","","ctr"];
    for (i = 0; i < data.childNodes.length; i++) {
        // use only 1st level element nodes to skip 1st level text nodes in NN
        if (data.childNodes[i].nodeType == 1) {
            // one final match 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("year")[0].firstChild.nodeValue;
            td = tr.insertCell(tr.cells.length);
            td.setAttribute("class",classes[tr.cells.length-1]);
            td.innerHTML = 
               oneRecord.getElementsByTagName("location")[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;
        }
    }
}

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('matchData')", 1000);
    }
}


</script>
</head>
<body onload="init('worldCupFinals.xml')">
<h1>Transforming XML into HTML Tables</h1>
<hr /> 

<table id="cupFinals">
<thead>
<tr><th>Year</th>
    <th>Host Country</th>
    <th>Winner</th>
    <th>Loser</th>
    <th>Score (Win - Lose)</th>
</tr>
</thead>
<tbody id="matchData"></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>

<!-- File:worldCupFinals.xml
<?xml version="1.0"?> 
<worldcup>
    <final>
        <location>Uruguay</location>
        <year>1930</year>
        <winner>Uruguay</winner>
        <winscore>4</winscore>
        <loser>Argentina</loser>
        <losscore>2</losscore>
    </final>
    <final>
        <location>Italy</location>
        <year>1934</year>
        <winner>Italy</winner>
        <winscore>2</winscore>
        <loser>Czechoslovakia</loser>
        <losscore>1</losscore>
    </final>
    <final>
        <location>France</location>
        <year>1938</year>
        <winner>Italy</winner>
        <winscore>4</winscore>
        <loser>Hungary</loser>
        <losscore>2</losscore>
    </final>
    <final>
        <location>Brazil</location>
        <year>1950</year>
        <winner>Uruguay</winner>
        <winscore>2</winscore>
        <loser>Brazil</loser>
        <losscore>1</losscore>
    </final>
    <final>
        <location>Switzerland</location>
        <year>1954</year>
        <winner>West Germany</winner>
        <winscore>3</winscore>
        <loser>Hungary</loser>
        <losscore>2</losscore>
    </final>
    <final>
        <location>Sweden</location>
        <year>1958</year>
        <winner>Brazil</winner>
        <winscore>5</winscore>
        <loser>Sweden</loser>
        <losscore>2</losscore>
    </final>
    <final>
        <location>Chile</location>
        <year>1962</year>
        <winner>Brazil</winner>
        <winscore>3</winscore>
        <loser>Czechoslovakia</loser>
        <losscore>1</losscore>
    </final>
    <final>
        <location>England</location>
        <year>1966</year>
        <winner>England</winner>
        <winscore>4</winscore>
        <loser>West Germany</loser>
        <losscore>2</losscore>
    </final>
    <final>
        <location>Mexico</location>
        <year>1970</year>
        <winner>Brazil</winner>
        <winscore>4</winscore>
        <loser>Italy</loser>
        <losscore>1</losscore>
    </final>
</worldcup>

-->

           
       








Related examples in the same category

1.Loads a XML file and permits to access to the data it contains
2.function loads the XML document from the specified URL
3.XML to JavaScript
4.Display XML content in HTML table