最终效果图如:
点击上面的姓名,分别连接到baidu,163,cnblog
点击第一个网址列时连接到$last,
点击第二个网址列是连接到对应显示的网址
三个文件在同一文件夹下面
首先建立三个文件,既xsl.xml文件,xsl.xsl文件,xsl.html文件
xsl.xml文件内容如下:
View Code
<?xml version="1.0" encoding="GB2312"?>
<sity>
<schoola>
<class urlnum="111">
<name>小明</name>
</class>
<class urlnum="222">
<name>小李</name>
</class>
<class urlnum="333">
<name>小花</name>
</class>
<class urlnum="333">
<namesa>小花</namesa>
</class>
</schoola>
<urladdress>
<resource urlnum="111" urladd="http://www.baidu.com">
</resource>
<resource urlnum="222" urladd="http://www.163.com">
</resource>
<resource urlnum="333" urladd="http://www.cnblogs.com">
</resource>
</urladdress>
</sity>
<sity>
<schoola>
<class urlnum="111">
<name>小明</name>
</class>
<class urlnum="222">
<name>小李</name>
</class>
<class urlnum="333">
<name>小花</name>
</class>
<class urlnum="333">
<namesa>小花</namesa>
</class>
</schoola>
<urladdress>
<resource urlnum="111" urladd="http://www.baidu.com">
</resource>
<resource urlnum="222" urladd="http://www.163.com">
</resource>
<resource urlnum="333" urladd="http://www.cnblogs.com">
</resource>
</urladdress>
</sity>
xsl.html内容:
View Code
<html>
<body>
<script language="javascript">
function load()
{ // Load XML
var xml =new ActiveXObject("Microsoft.XMLDOM") //定义xml变量
xml.async =false
xml.load("xsl.xml") //讲xsl.xml内容加载到内存中
// Load the XSL
var xsl =new ActiveXObject("Microsoft.XMLDOM") //定义xsl变量
xsl.async =false
xsl.load("xsl.xsl") //讲xsl.xsl内容加载到内存中
// Transform
document.write(xml.transformNode(xsl)) //讲xsl文件和xml文件整合输出
}
load(); //执行javascript脚本
</script>
</body>
</html>
<body>
<script language="javascript">
function load()
{ // Load XML
var xml =new ActiveXObject("Microsoft.XMLDOM") //定义xml变量
xml.async =false
xml.load("xsl.xml") //讲xsl.xml内容加载到内存中
// Load the XSL
var xsl =new ActiveXObject("Microsoft.XMLDOM") //定义xsl变量
xsl.async =false
xsl.load("xsl.xsl") //讲xsl.xsl内容加载到内存中
// Transform
document.write(xml.transformNode(xsl)) //讲xsl文件和xml文件整合输出
}
load(); //执行javascript脚本
</script>
</body>
</html>
xsl.xslt文件内容:
View Code
<?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="/">//定义遍历根节点
<table>
<xsl:for-each select="sity/schoola/class">//定位遍历位置
<xsl:sort select="name"/>//给当前遍历到的节点名为name的值排序
<tr>
<td>
<xsl:choose>
<xsl:when test="@urlnum=111">//如果当前的节点unrnum属性是为"111",则将name属性的超链接设置为http://www.baidu.com
<a href="http://www.baidu.com">
<xsl:value-of select="name"/>
</a>
</xsl:when>
<xsl:when test="@urlnum=222">
<a href="http://www.163.com">//同理
<xsl:value-of select="name"/>
</a>
</xsl:when>
<xsl:when test="@urlnum=333">//同理
<a href="http://www.cnblogs.com">
<xsl:value-of select="name"/>
</a>
</xsl:when>
<xsl:when test="@urlnum">
<xsl:value-of select="name"/>
</xsl:when>
</xsl:choose>
</td>
</tr>
</xsl:for-each>
<xsl:for-each select="sity/urladdress/resource">
<xsl:variable name="last" select ="@urladd"/>//将sity/urladdress/resource中resource的urladd属性赋值给变量last
<tr>
<td>
<a href="'$last'">//讲urladd的属性值显示出来并设置其超链接只想$last
<xsl:value-of select="@urladd"/>
</a>
</td>
<td>
<xsl:value-of select="$last"/>//将last值显示出来
</td>
<td>
<SCRIPT LANGUAGE="javascript">//注:下面三个javascript脚本的作用是将属性urladd设置为超链接并且链接地址指向urladd的属性值
<xsl:comment>
<![CDATA[
document.write("<a "); //用javascript输出标签"<a"
]]>//
</xsl:comment>
</SCRIPT>
href="<xsl:value-of select='@urladd'/>"//输出显示urladd的值
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
document.write(">"); //用javascript显示标签">"
]]>//
</xsl:comment>
</SCRIPT>
<xsl:value-of select="@urladd"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
document.write("</a>"); //用javascript显示标签"</a>"
]]>//
</xsl:comment>
</SCRIPT>
</td>
<td>
<xsl:value-of select="concat('he ','is ','a ','good ','boy')"/>//用函数concat拼接字符串
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">//定义遍历根节点
<table>
<xsl:for-each select="sity/schoola/class">//定位遍历位置
<xsl:sort select="name"/>//给当前遍历到的节点名为name的值排序
<tr>
<td>
<xsl:choose>
<xsl:when test="@urlnum=111">//如果当前的节点unrnum属性是为"111",则将name属性的超链接设置为http://www.baidu.com
<a href="http://www.baidu.com">
<xsl:value-of select="name"/>
</a>
</xsl:when>
<xsl:when test="@urlnum=222">
<a href="http://www.163.com">//同理
<xsl:value-of select="name"/>
</a>
</xsl:when>
<xsl:when test="@urlnum=333">//同理
<a href="http://www.cnblogs.com">
<xsl:value-of select="name"/>
</a>
</xsl:when>
<xsl:when test="@urlnum">
<xsl:value-of select="name"/>
</xsl:when>
</xsl:choose>
</td>
</tr>
</xsl:for-each>
<xsl:for-each select="sity/urladdress/resource">
<xsl:variable name="last" select ="@urladd"/>//将sity/urladdress/resource中resource的urladd属性赋值给变量last
<tr>
<td>
<a href="'$last'">//讲urladd的属性值显示出来并设置其超链接只想$last
<xsl:value-of select="@urladd"/>
</a>
</td>
<td>
<xsl:value-of select="$last"/>//将last值显示出来
</td>
<td>
<SCRIPT LANGUAGE="javascript">//注:下面三个javascript脚本的作用是将属性urladd设置为超链接并且链接地址指向urladd的属性值
<xsl:comment>
<![CDATA[
document.write("<a "); //用javascript输出标签"<a"
]]>//
</xsl:comment>
</SCRIPT>
href="<xsl:value-of select='@urladd'/>"//输出显示urladd的值
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
document.write(">"); //用javascript显示标签">"
]]>//
</xsl:comment>
</SCRIPT>
<xsl:value-of select="@urladd"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
document.write("</a>"); //用javascript显示标签"</a>"
]]>//
</xsl:comment>
</SCRIPT>
</td>
<td>
<xsl:value-of select="concat('he ','is ','a ','good ','boy')"/>//用函数concat拼接字符串
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>