javascript----xml----xslt操作

最终效果图如:

点击上面的姓名,分别连接到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 >

 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 >

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 >