利用xslt扩展html
test.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<html>
<script>
var ds = [[1,2,3],[4,5,6],[7,8,9]];
</script>
<grid id="abc" datasource="ds"/>
<script>
alert(abc.id);
</script>
</html>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<html>
<script>
var ds = [[1,2,3],[4,5,6],[7,8,9]];
</script>
<grid id="abc" datasource="ds"/>
<script>
alert(abc.id);
</script>
</html>
test.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="grid.xsl"/>
<xsl:template match="/">
<html>
<head>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="//script">
<xsl:copy-of select="."/>
</xsl:template>
</xsl:stylesheet>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="grid.xsl"/>
<xsl:template match="/">
<html>
<head>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="//script">
<xsl:copy-of select="."/>
</xsl:template>
</xsl:stylesheet>
grid.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="//grid">
<h2>Grid</h2>
<script type="text/javascript">
<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
if (Grid === undefined){
var Grid = function (datasource){
var tbl = document.createElement('table');
tbl.border = 1;
for (var i=0; i<datasource.length; i++){
var tr = document.createElement('tr');
for (var k=0; k<datasource[i].length; k++){
var td = document.createElement('td');
var tt = document.createTextNode(datasource[i][k]);
td.appendChild(tt);
tr.appendChild(td);
}
tbl.appendChild(tr);
}
return tbl;
}
}
var <xsl:value-of select="@id"/> = function (){
var sc = document.getElementById('<xsl:value-of select="@id"/>');
var gd = new Grid(<xsl:value-of select="@datasource"/>);
gd.id = "<xsl:value-of select="@id"/>";
sc.parentNode.replaceChild(gd, sc);
return gd;
}();
</script>
</xsl:template>
</xsl:stylesheet>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="//grid">
<h2>Grid</h2>
<script type="text/javascript">
<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
if (Grid === undefined){
var Grid = function (datasource){
var tbl = document.createElement('table');
tbl.border = 1;
for (var i=0; i<datasource.length; i++){
var tr = document.createElement('tr');
for (var k=0; k<datasource[i].length; k++){
var td = document.createElement('td');
var tt = document.createTextNode(datasource[i][k]);
td.appendChild(tt);
tr.appendChild(td);
}
tbl.appendChild(tr);
}
return tbl;
}
}
var <xsl:value-of select="@id"/> = function (){
var sc = document.getElementById('<xsl:value-of select="@id"/>');
var gd = new Grid(<xsl:value-of select="@datasource"/>);
gd.id = "<xsl:value-of select="@id"/>";
sc.parentNode.replaceChild(gd, sc);
return gd;
}();
</script>
</xsl:template>
</xsl:stylesheet>
