前段时间刚学了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
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 >
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 >
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
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