前段时间刚学了XML和XSLT,作为练习,我用XML和XSLT结合JavaScript写了一个实现页面内容筛选显示,这样在做一些基本的数据处理时就不需要重新载入页面了,提高了效率。
代码如下:
1<?xmlversion="1.0"encoding="GB2312"?>
2<xs:schemaxmlns:xs="http://www.w3.org/2001/XMLSchema"elementFormDefault="qualified"attributeFormDefault="unqualified">
3<xs:elementname="PoemList">
4<xs:complexType>
5<xs:sequence>
6<xs:elementname="Poem"minOccurs="1"maxOccurs="unbounded">
7<xs:complexType>
8<xs:sequence>
9<xs:elementname="Title"/>
10<xs:elementname="Write"/>
11<xs:elementname="Text">
12<xs:complexType>
13<xs:sequence>
14<!--必须定义Line元素,否则诗句无法分行显示-->
15<xs:elementname="Line"minOccurs="1"maxOccurs="unbounded"/>
16</xs:sequence>
17</xs:complexType>
18</xs:element>
19<xs:elementname="Mean"/>
20</xs:sequence>
21<xs:attributename="Type"type="xs:string"use="required"/>
22</xs:complexType>
23</xs:element>
24</xs:sequence>
25</xs:complexType>
26</xs:element>
27</xs:schema>
28
1
<?
xmlversion="1.0"encoding="UTF-8"
?>
2
<
xsl:stylesheet
version
="2.0"
xmlns:xsl
="http://www.w3.org/1999/XSL/Transform"
xmlns:xs
="http://www.w3.org/2001/XMLSchema"
xmlns:fn
="http://www.w3.org/2005/xpath-functions"
xmlns:xdt
="http://www.w3.org/2005/xpath-datatypes"
>
3
<
xsl:output
version
="1.0"
encoding
="GB2312"
indent
="no"
omit-xml-declaration
="no"
media-type
="text/html"
/>
4
<
xsl:template
match
="/"
>
5
<
html
>
6
<
head
>
7
<
title
>
SelectPoem
</
title
>
8
<
script
language
="javascript"
>
9
functionselectPoem(write,selectedIndex){
10
stylesheet=document.XSLDocument;
11
xmldoc =document.XMLDocument;
12
selectField=stylesheet.selectSingleNode("//xsl:if/@test");
13
14
if(write=="全部")
15
selectField.value="Write=*";
16
else
17
selectField.value="Write='"+write+"'";
18
19
PoemList.innerHTML=xmldoc.documentElement.transformNode(stylesheet);
20
document.SelectPoemForm.SelectPoemList.selectedIndex=selectedIndex;
21
}
22
</
script
>
23
</
head
>
24
<
body
>
25
<
br
/>
26
<
div
id
="PoemList"
>
27
<
xsl:apply-templates
select
="PoemList"
/>
28
</
div
>
29
</
body
>
30
</
html
>
31
</
xsl:template
>
32
<
xsl:template
match
="PoemList"
>
33
<
table
align
="center"
border
="0"
>
34
<
thead
>
35
<
tr
align
="center"
>
36
<
td
align
="center"
height
="39"
>
37
<
h1
>
唐  诗
</
h1
>
38
</
td
>
39
</
tr
>
40
</
thead
>
41
<
tbody
>
42
<
tr
>
43
<
td
align
="center"
>
44
<
form
name
="SelectPoemForm"
>
45
作者:
46
<
select
id
="SelectPoemList"
name
="SelectPoem"
class
="droplist"
onChange
="selectPoem(this.options[selectedIndex].text,selectedIndex);"
>
47
<
option
>
全部
</
option
>
48
<
xsl:for-each
select
="Poem"
>
49
<
option
>
50
<
xsl:value-of
select
="Write"
/>
51
</
option
>
52
</
xsl:for-each
>
53
</
select
>
54
</
form
>
55
<
hr
color
="black"
size
="2"
/>
56
<
br
/>
57
<
xsl:for-each
select
="Poem"
>
58
<
xsl:if
test
="Write=*"
>
59
<
table
align
="center"
border
="0"
>
60
<
tbody
>
61
<
tr
align
="center"
valign
="middle"
>
62
<
td
align
="center"
height
="2"
valign
="center"
width
="350"
>