利用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 >

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 >

 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 &lt; datasource.length; i++){
                var tr = document.createElement('tr');
                for (var k=0; k &lt; 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 >

转载于:https://www.cnblogs.com/hackwaly/archive/2008/08/15/1268878.html