类似插件:
jquery.xslt http://hyperthunk.github.io/jquery.xslt/
jquery xslt plugin: http://www.jongma.org/webtools/jquery/xslt/
jquery.xslt http://hyperthunk.github.io/jquery.xslt/
jquery xslt plugin: http://www.jongma.org/webtools/jquery/xslt/
http://book.51cto.com/art/200805/72637.htm
a.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
Xml代码 <?xml version="1.0" encoding="UTF-8"?> <articles> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> <article> <author>author1</author> <title>title1</title> <date>2005-2-25</date> <content><![CDATA[hello klfkdlskdf dkfldksdfsd]]></content> </article> </articles> |
a.xslt
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
Xml代码 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/"> <html> <head> <title>test</title> </head> <body> <table border="1"> <tbody> <tr> <th>author</th> <th>title</th> <th>date</th> </tr> <xsl:for-each select="/articles/article"> <tr> <td> <xsl:value-of select="author"/> </td> <td> <xsl:value-of select="title"/> </td> <td> <xsl:value-of select="date"/> </td> </tr> </xsl:for-each> </tbody> </table> </body> </html> </xsl:template> </xsl:stylesheet> |
转换
来自Google公司的google ajaxslt，它是基于JavaScript实现的，适用于任何浏览器，并且还有比较实用的日志和调试功能。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Html代码 <script src="misc.js" type="text/javascript"></script> <script src="dom.js" type="text/javascript"></script> <script src="xpath.js" type="text/javascript"></script> <script src="xslt.js" type="text/javascript"></script> function test_xslt() { var strXml = getXml("a.xml"); var strXsl = getXml("a.xslt"); var xml = xmlParse(strXml); var xslt = xmlParse(strXsl); var html = xsltProcess(xml, xslt); return html; } |
结果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Html代码 <html> <head> <title>test</title> </head> <body> <table border="1"> <tbody> <tr> <th>author</th> <th>title</th> <th>date</th> </tr> <tr> <td>author1</td> <td>title1</td> <td>2005-2-25</td> </tr> <tr> <td>author1</td> <td>title1</td> <td>2005-2-25</td> </tr> <tr> <td>author1</td> <td>title1</td> <td>2005-2-25</td> </tr> <tr> <td>author1</td> <td>title1</td> <td>2005-2-25</td> </tr> <tr> <td>author1</td> <td>title1</td> <td>2005-2-25</td> </tr> </tbody> </table> </body> </html> |
也可以在a.xml的第2行增加一句XSLT样式表声明，如下：
<?xml-stylesheet type=”text/xsl” href=”a.xslt”?>
这样就可以在IE浏览器中查看到效果了
