<html>
<head>
<script type="text/javascript">
function loadXMLDoc(dname){
if (window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}else{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult(){
xname = document.getElementById("sortie").value;
if (xname == "test1.xsl"){
xname = "test.xsl";
}else{
xname = "test1.xsl";
}
document.getElementById("sortie").value = xname;
xml=loadXMLDoc("test.xml");
xsl=loadXMLDoc(xname);
document.getElementById("example").innerHTML="";
// code for IE
if (window.ActiveXObject){
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument){
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<form>
<input type="button" value="Sort" onclick="displayResult()">
<input id="sortie" type="hidden" name="sortie" value="test1.xsl">
</form>
<div id="example" />
</body>
</html
The XSL
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html" indent="yes" encoding="UTF-8" />
<xsl:template match="/">
<html>
<head>
<style type="text/css">
table {
border: 0;
background: lightyellow;
}
th {
background: grey;
color: white;
}
th.sorted {
background: darkblue;
color: white;
}
td { background: lightgrey;}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>File</th>
<th class="sorted">Dir</th>
</tr>
<xsl:for-each select="tabs/item">
<xsl:sort select="dir" />
<tr>
<td><xsl:value-of select="@id"/></td>
<td><xsl:value-of select="file"/></td>
<td><xsl:value-of select="dir"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
