博主学习XML和XSLT后，结合JavaScript实现了页面内容筛选显示。通过这种方式，在进行基本数据处理时无需重新载入页面，有效提高了效率。
前段时间刚学了XML和XSLT，作为练习，我用XML和XSLT结合JavaScript写了一个实现页面内容筛选显示，这样在做一些基本的数据处理时就不需要重新载入页面了，提高了效率。
代码如下：
1
<?xml version="1.0" encoding="GB2312"?>
2<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
3 <xs:element name="PoemList">
4 <xs:complexType>
5 <xs:sequence>
6 <xs:element name="Poem" minOccurs="1" maxOccurs="unbounded">
7 <xs:complexType>
8 <xs:sequence>
9 <xs:element name="Title"/>
10 <xs:element name="Write"/>
11 <xs:element name="Text">
12 <xs:complexType>
13 <xs:sequence>
14 <!-- 必须定义Line元素,否则诗句无法分行显示 -->
15 <xs:element name="Line" minOccurs="1" maxOccurs="unbounded"/>
16 </xs:sequence>
17 </xs:complexType>
18 </xs:element>
19 <xs:element name="Mean"/>
20 </xs:sequence>
21 <xs:attribute name="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
<?xml version="1.0" encoding="GB2312"?>2
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">3
<xs:element name="PoemList">4
<xs:complexType>5
<xs:sequence>6
<xs:element name="Poem" minOccurs="1" maxOccurs="unbounded">7
<xs:complexType>8
<xs:sequence>9
<xs:element name="Title"/>10
<xs:element name="Write"/>11
<xs:element name="Text">12
<xs:complexType>13
<xs:sequence>14
<!-- 必须定义Line元素,否则诗句无法分行显示 -->15
<xs:element name="Line" minOccurs="1" maxOccurs="unbounded"/>16
</xs:sequence>17
</xs:complexType>18
</xs:element>19
<xs:element name="Mean"/>20
</xs:sequence>21
<xs:attribute name="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<?xml version="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 function selectPoem(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">
63 <span style="font-size:larger; font-weight:bold; ">
64 <xsl:value-of select="Title" />
65 </span>
66 </td>
67 <td height="2" rowspan="3" width="1"></td>
68 <td align="left" height="2" rowspan="2" width="350">类型: <xsl:value-of select="@Type" />
69 </td>
70 </tr>
71 <tr>
72 <td align="center" width="350">
73 <span style="font-size:smaller; ">
74 <xsl:value-of select="Write" />
75 </span>
76 </td>
77 </tr>
78 <tr align="center">
79 <td align="center" valign="center" width="350">
80 <xsl:for-each select="Text">
81 <br />
82 <xsl:for-each select="Line">
83 <xsl:value-of select="." />
84 <br />
85 </xsl:for-each>
86 <br />
87 </xsl:for-each>
88 <br />
89 </td>
90 <td align="left" height="20" rowspan="2" valign="center" width="350">
91 <xsl:value-of select="Mean" />
92 </td>
93 </tr>
94 </tbody>
95 </table>
96 <hr color="#E8E8E8" size="1" />
97 <br />
98 </xsl:if>
99 </xsl:for-each>
100 <br />
101 <hr color="black" size="2" />
102 <br />
103 </td>
104 </tr>
105 </tbody>
106 </table>
107 </xsl:template>
108</xsl:stylesheet>
<?xml version="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
function selectPoem(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
else17
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">63
<span style="font-size:larger; font-weight:bold; ">64
<xsl:value-of select="Title" />65
</span>66
</td>67
<td height="2" rowspan="3" width="1"></td>68
<td align="left" height="2" rowspan="2" width="350">类型: <xsl:value-of select="@Type" />69
</td>70
</tr>71
<tr>72
<td align="center" width="350">73
<span style="font-size:smaller; ">74
<xsl:value-of select="Write" />75
</span>76
</td>77
</tr>78
<tr align="center">79
<td align="center" valign="center" width="350">80
<xsl:for-each select="Text">81
<br />82
<xsl:for-each select="Line">83
<xsl:value-of select="." />84
<br />85
</xsl:for-each>86
<br />87
</xsl:for-each>88
<br />89
</td>90
<td align="left" height="20" rowspan="2" valign="center" width="350">91
<xsl:value-of select="Mean" />92
</td>93
</tr>94
</tbody>95
</table>96
<hr color="#E8E8E8" size="1" />97
<br />98
</xsl:if>99
</xsl:for-each>100
<br />101
<hr color="black" size="2" />102
<br />103
</td>104
</tr>105
</tbody>106
</table>107
</xsl:template>108
</xsl:stylesheet> 1<?xml version="1.0" encoding="GB2312"?>
2<?xml-stylesheet type="text/xsl" href="SelectPoem.xslt"?>
3<PoemList xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="SelectPoem.xsd">
4 <Poem Type="七言绝句">
5 <Title>送孟浩然之广陵</Title>
6 <Write>李白</Write>
7 <Text>
8 <Line>故人西辞黄鹤楼，烟花三月下扬州。</Line>
9 <Line>孤帆远影碧空尽，惟见长江天际流。</Line>
10 </Text>
11 <Mean>
12 老朋友孟浩然，辞别西楚的黄鹤楼；
13 阳春三月烟花如海，他去游历扬州。
14 一叶孤舟，远远地消失在碧空尽头；
15 只见浩浩荡荡的长江，向天际奔流！
16 </Mean>
17 </Poem>
18 <Poem Type="七言绝句">
19 <Title>江南逢李龟年</Title>
20 <Write>杜甫</Write>
21 <Text>
22 <Line>岐王宅里寻常见，崔九堂前几度闻。</Line>
23 <Line>正是江南好风景，落花时节又逢君。</Line>
24 </Text>
25 <Mean>
26 当年在岐王宅里，常常见到你的演出；
27 在崔九堂前，也曾多次欣赏你的艺术。
28 没有想到，在这风景一派大好的江南；
29 正是落花时节，能巧遇你这位老相熟。
30 </Mean>
31 </Poem>
32 <Poem Type="五言律诗">
33 <Title>送杜少府之任蜀州</Title>
34 <Write>王勃</Write>
35 <Text>
36 <Line>城阙辅三秦，风烟望五津。</Line>
37 <Line>与君离别意，同是宦游人。</Line>
38 <Line>海内存知己，天涯若比邻。</Line>
39 <Line>无为在岐路，儿女共沾巾。</Line>
40 </Text>
41 <Mean>
42 古代三秦之地，拱护长安城垣宫阙。
43 风烟滚滚，望不到蜀州岷江的五津。
44 与你握手作别时，彼此间心心相印；
45 你我都是远离故乡，出外做官之人。
46 四海之内只要有了你，知己啊知己，
47 不管远隔在天涯海角，都象在一起。
48 请别在分手的岐路上，伤心地痛哭；
49 象多情的少年男女，彼此泪落沾衣。
50 </Mean>
51 </Poem>
52 <Poem Type="七言乐府诗">
53 <Title>出塞</Title>
54 <Write>王昌龄</Write>
55 <Text>
56 <Line>秦时明月汉时关，万里长征人未还。</Line>
57 <Line>但使龙城飞将在，不教胡马渡阴山。</Line>
58 </Text>
59 <Mean>
60 依旧是秦时的明月汉时的边关，
61 征战长久延续万里征夫不回还。
62 倘若龙城的飞将李广而今健在，
63 绝不许匈奴南下牧马度过阴山。
64 </Mean>
65 </Poem>
66</PoemList>
67
<?xml version="1.0" encoding="GB2312"?>2
<?xml-stylesheet type="text/xsl" href="SelectPoem.xslt"?>3
<PoemList xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="SelectPoem.xsd">4
<Poem Type="七言绝句">5
<Title>送孟浩然之广陵</Title>6
<Write>李白</Write>7
<Text>8
<Line>故人西辞黄鹤楼，烟花三月下扬州。</Line>9
<Line>孤帆远影碧空尽，惟见长江天际流。</Line>10
</Text>11
<Mean>12
老朋友孟浩然，辞别西楚的黄鹤楼；13
阳春三月烟花如海，他去游历扬州。14
一叶孤舟，远远地消失在碧空尽头；15
只见浩浩荡荡的长江，向天际奔流！16
</Mean>17
</Poem>18
<Poem Type="七言绝句">19
<Title>江南逢李龟年</Title>20
<Write>杜甫</Write>21
<Text>22
<Line>岐王宅里寻常见，崔九堂前几度闻。</Line>23
<Line>正是江南好风景，落花时节又逢君。</Line>24
</Text>25
<Mean>26
当年在岐王宅里，常常见到你的演出；27
在崔九堂前，也曾多次欣赏你的艺术。28
没有想到，在这风景一派大好的江南；29
正是落花时节，能巧遇你这位老相熟。30
</Mean>31
</Poem>32
<Poem Type="五言律诗">33
<Title>送杜少府之任蜀州</Title>34
<Write>王勃</Write>35
<Text>36
<Line>城阙辅三秦，风烟望五津。</Line>37
<Line>与君离别意，同是宦游人。</Line>38
<Line>海内存知己，天涯若比邻。</Line>39
<Line>无为在岐路，儿女共沾巾。</Line>40
</Text>41
<Mean>42
古代三秦之地，拱护长安城垣宫阙。43
风烟滚滚，望不到蜀州岷江的五津。44
与你握手作别时，彼此间心心相印；45
你我都是远离故乡，出外做官之人。46
四海之内只要有了你，知己啊知己，47
不管远隔在天涯海角，都象在一起。48
请别在分手的岐路上，伤心地痛哭；49
象多情的少年男女，彼此泪落沾衣。50
</Mean>51
</Poem>52
<Poem Type="七言乐府诗">53
<Title>出塞</Title>54
<Write>王昌龄</Write>55
<Text>56
<Line>秦时明月汉时关，万里长征人未还。</Line>57
<Line>但使龙城飞将在，不教胡马渡阴山。</Line>58
</Text>59
<Mean>60
依旧是秦时的明月汉时的边关，61
征战长久延续万里征夫不回还。62
倘若龙城的飞将李广而今健在，63
绝不许匈奴南下牧马度过阴山。64
</Mean>65
</Poem>66
</PoemList>67
扫一扫
4101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
