0. 有关JS、XMLDOM、XSLT的基础知识,可以参考我前面的三篇学习笔记:
《JS学习笔记》
《XML DOM学习笔记(JS) 》
《XSLT学习笔记 》
1. 中英文切换:
原本打算是用一个XML文件(Language.xml)作为语言的配置文件,然后在HTML/JS中传入所选择得语言种类,来加载不同的XML节点,我最原始的思路:
<!--langg传文件名:zh或en-->
<xsl:param name="langg"></xsl:param>
<xsl:variable name="languag" select="document($filename)/language/$langg"></xsl:variable>
//Language.XML
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="gb2312"?>
<language>
<zh>
<title>员工信息</title>
<btnAdd>新建员工</btnAdd>
<column1>姓名</column1>
<column2>部门</column2>
<column3>备注</column3>
<column4>删除</column4>
<CurrentPage>当前页码</CurrentPage>
<TotelPage>总页数</TotelPage>
<TotelCount>总记录数</TotelCount>
<FirstPage>首页</FirstPage>
<PrevPage>前一页</PrevPage>
<NextPage>后一页</NextPage>
<LastPage>最后一页</LastPage>
</zh>
<en>
<title>Employee Information</title>
<btnAdd>Add New Employee</btnAdd>
<column1>Name</column1>
<column2>Department</column2>
<column3>Memo</column3>
<column4>Delete</column4>
<CurrentPage>Current Page</CurrentPage>
<TotelPage>Totel Page Count</TotelPage>
<TotelCount>Totel Record Count</TotelCount>
<FirstPage>First Page</FirstPage>
<PrevPage>Previous Page</PrevPage>
<NextPage>Next Page</NextPage>
<LastPage>Last Page</LastPage>
</en>
</language>
但在实践过程中,发现XSL中document函数后的Xpath不能带参数变量,只好改成两个文件(zh.xml和en.xml),通过HTML/JS传入所选择的语言的种类,来加载不同的语言所对应的配置文件:
<!--langg传文件名:zh或en-->
<xsl:param name="langg"></xsl:param>
<xsl:variable name="filename" select="concat($langg,'.xml')"></xsl:variable>
<xsl:variable name="languag" select="document($filename)/language"></xsl:variable>
//zh.xml
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="gb2312"?>
<language>
<title>员工信息</title>
<btnAdd>新建员工</btnAdd>
<column1>姓名</column1>
<column2>部门</column2>
<column3>备注</column3>
<column4>删除</column4>
<CurrentPage>当前页码</CurrentPage>
<TotelPage>总页数</TotelPage>
<TotelCount>总记录数</TotelCount>
<FirstPage>首页</FirstPage>
<PrevPage>前一页</PrevPage>
<NextPage>后一页</NextPage>
<LastPage>最后一页</LastPage>
<add>
<NotNull>员工姓名不能为空!</NotNull>
<NameRepeat>姓名重复,请重新输入姓名!</NameRepeat>
<Save>保存</Save>
<Cancel>取消</Cancel>
<Title>员工信息</Title>
<Name>姓名</Name>
<Dept>部门</Dept>
<Memo>备注</Memo>
</add>
<del>
<Text1>确定删除 </Text1>
<Text2> 记录吗?</Text2>
</del>
<edit>
</edit>
</language>
//en.xml
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<?xml version="1.0" encoding="gb2312"?>
<language>
<title>Employee Information</title>
<btnAdd>Add New Employee</btnAdd>
<column1>Name</column1>
<column2>Department</column2>
<column3>Memo</column3>
<column4>Delete</column4>
<CurrentPage>Current Page</CurrentPage>
<TotelPage>Totel Page Count</TotelPage>
<TotelCount>Totel Record Count</TotelCount>
<FirstPage>First Page</FirstPage>
<PrevPage>Previous Page</PrevPage>
<NextPage>Next Page</NextPage>
<LastPage>Last Page</LastPage>
<add>
<NotNull>You must enter employee name!</NotNull>
<NameRepeat>Name is already exists,please input again!</NameRepeat>
<Save>Save</Save>
<Cancel>Cancel</Cancel>
<Title>Employee Information</Title>
<Name>Name</Name>
<Dept>Department</Dept>
<Memo>Memo</Memo>
</add>
<del>
<Text1>Do you confirm to delete </Text1>
<Text2> record?</Text2>
</del>
</language>
2. 分页:
//JS中
xslProcessor.addParameter("currentPage", currentPage);
xslProcessor.addParameter("totelPage", GetTotlePage());
xslProcessor.addParameter("totelEmployee", GetTotleEmplyee());
xslProcessor.addParameter("pageSize", pageSize);
//定义要读取的Employee记录的范围
xslProcessor.addParameter("startEmployee", (currentPage-1)*pageSize);
xslProcessor.addParameter("endEmployee", currentPage*pageSize);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//XSL中
xsl中,只读取一定范围的节点(startEmployee<position()<=endEmployee):
<xsl:for-each select="//employee[position()>$startEmployee and position()<=$endEmployee]">
3. 排序:
//JS中:
xslProcessor.addParameter("order", order);//order是排序依据的列名
xslProcessor.addParameter("scending", scending);//顺序还是倒序,做得很粗糙,尚待完善
.
//XSL中
<xsl:sort select="*[name()=$order]" order="{$scending}"/>
//很多文章介绍说可以这样<xsl:sort select="$order" order="{$scending}"/>,但在我自己的机器上测试不行的说![](https://www.cnblogs.com/Images/dot.gif)
4. 增删查改:基本的XMLDOM操作,直接看代码吧...
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
数据文件
1
//employee.xml
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
<?xml version="1.0" encoding="gb2312"?>
4
<employees>
5
<employee>
6
<name>a</name>
7
<dept>dept1</dept>
8
<memo>1</memo>
9
</employee>
10
<employee>
11
<name>b</name>
12
<dept>dept2</dept>
13
<memo>2</memo>
14
</employee>
15
<employee>
16
<name>c</name>
17
<dept>dept3</dept>
18
<memo>3</memo>
19
</employee>
20
<employee>
21
<name>d</name>
22
<dept>dept4</dept>
23
<memo>4</memo>
24
</employee>
25
<employee>
26
<name>e</name>
27
<dept>dept5</dept>
28
<memo>5</memo>
29
</employee>
30
<employee>
31
<name>f</name>
32
<dept>dept6</dept>
33
<memo>6</memo>
34
</employee>
35
<employee>
36
<name>g</name>
37
<dept>dept7</dept>
38
<memo>7</memo>
39
</employee>
40
<employee>
41
<name>h</name>
42
<dept>dept8</dept>
43
<memo>8</memo>
44
</employee>
45
</employees>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
XSL文件
1
//employee.xsl
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
<?xml version="1.0" encoding="gb2312"?>
4
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
5
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
6
version="1.0">
7![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
<xsl:param name="currentPage"></xsl:param>
9
<xsl:param name="totelPage"></xsl:param>
10
<xsl:param name="totelEmployee"></xsl:param>
11
<xsl:param name="pageSize"></xsl:param>
12
<xsl:param name="startEmployee"></xsl:param>
13
<xsl:param name="endEmployee"></xsl:param>
14
<xsl:param name="order"></xsl:param>
15
<xsl:param name="scending"></xsl:param>
16
<xsl:param name="langg"></xsl:param>
17![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
<xsl:variable name="filename" select="concat($langg,'.xml')"></xsl:variable>
19
<xsl:variable name="languag" select="document($filename)/language"></xsl:variable>
20
<xsl:template match="/">
21
<table border="1" cellspacing="0" style="font-size:14pt">
22
<tbody>
23
<tr align="center" bgcolor="#33CCCC">
24
<th><a href="javascript:sort('name')"><xsl:value-of select="$languag/column1"/></a></th>
25
<th><a href="javascript:sort('dept')"><xsl:value-of select="$languag/column2"/></a></th>
26
<th><a href="javascript:sort('memo')"><xsl:value-of select="$languag/column3"/></a></th>
27
<th> </th>
28
</tr>
29
<xsl:for-each select="//employee[position()>$startEmployee and position()<=$endEmployee]">
30
<xsl:sort select="*[name()=$order]" order="{$scending}"/>
31
<tr align="center">
32
<xsl:variable name="name" select="name"></xsl:variable>
33
<td><a href="javascript:Edit('{$name}')"><xsl:value-of select="name"/></a></td>
34
<td><xsl:value-of select="dept"/></td>
35
<td><xsl:value-of select="memo"/></td>
36
<td><a href="javascript:delEmployee('{$name}')"><xsl:value-of select="$languag/column4"/></a></td>
37
</tr>
38
</xsl:for-each>
39
</tbody>
40
</table>
41
<br/>
42
<xsl:value-of select="$languag/CurrentPage"/>:<xsl:value-of select="$currentPage"></xsl:value-of> <xsl:value-of select="' '"></xsl:value-of>
43
<xsl:value-of select="$languag/TotelPage"/>:<xsl:value-of select="$totelPage"></xsl:value-of><xsl:value-of select="' '"></xsl:value-of>
44
<xsl:value-of select="$languag/TotelCount"/>:<xsl:value-of select="$totelEmployee"></xsl:value-of><xsl:value-of select="' '"></xsl:value-of>
45
<xsl:choose>
46
<xsl:when test="$currentPage=1">
47
<xsl:value-of select="$languag/FirstPage"/> | <xsl:value-of select="$languag/PrevPage"/> |
48
</xsl:when>
49
<xsl:otherwise>
50
<a href="javascript:firstPage()"><xsl:value-of select="$languag/FirstPage"/></a> | <a href="javascript:prevPage()"><xsl:value-of select="$languag/PrevPage"/></a> |
51
</xsl:otherwise>
52
</xsl:choose>
53![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
54
<xsl:choose>
55
<xsl:when test="$currentPage=$totelPage">
56
<xsl:value-of select="$languag/NextPage"/> | <xsl:value-of select="$languag/LastPage"/>
57
</xsl:when>
58
<xsl:otherwise>
59
<a href="javascript:nextPage()"><xsl:value-of select="$languag/NextPage"/></a> | <a href="javascript:lastPage()"><xsl:value-of select="$languag/LastPage"/></a>
60
</xsl:otherwise>
61
</xsl:choose>
62
</xsl:template>
63
</xsl:stylesheet>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
List.html
1
<html>
2
<head>
3
<title>Employee Information</title>
4
</head>
5
6
<body>
7
<div>
8
<button align="middle" id="btnAdd" onclick="addEmployee()">新建员工</button>
9
<div align="right">
10
<a href="javascript:languageChange('zh')">中文版</a>|<a href="javascript:languageChange('en')">English Version</a>
11
</div>
12
</div>
13
<div id="divContent" align="center">
14
</div>
15
16
<script language="javascript" type="text/javascript">
17
var lngg = new ActiveXObject("MSXML2.DOMDocument");
18
var langg = "zh";
19
var scending = "ascending";
20
lngg.load("language.xml");
21
function languageChange(str)
22![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
23
lnggRoot = lngg.selectSingleNode("//" + str);
24
btnAdd.value = lnggRoot.selectSingleNode("btnAdd").childNodes[0].xml;
25
langg=str;
26
showTable();
27
}
28
//全局变量
29
var currentPage = 1;
30
var pageSize = 5;
31
var order = "name";
32
33
//初始化
34
var xml = new ActiveXObject("MSXML2.DOMDocument");
35
xml.load("employee.xml");
36
var root=xml.documentElement;
37
var xsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
38
xsl.load("employee.xsl");
39
var xslTemplate = new ActiveXObject("MSXML2.XSLTemplate");
40
xslTemplate.stylesheet = xsl;
41
var xslProcessor = xslTemplate.createProcessor();
42
xslProcessor.input = xml;
43
44
//总记录数
45
function GetTotleEmplyee()
46![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
47
return xml.documentElement.childNodes.length;
48
}
49
50
//总页数
51
function GetTotlePage()
52![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
53
return Math.ceil(GetTotleEmplyee()/pageSize);
54
}
55
56
//增
57
function addEmployee()
58![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
59
var tmpObj = new Object();
60
tmpObj.XML = xml;
61
var lgg = new ActiveXObject("MSXML2.DOMDocument");
62
lgg.load(langg+".xml");
63
tmpObj.language = lgg;
64
window.showModalDialog("add.html",tmpObj,
65
"dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
66
showTable();
67
}
68
69
//删
70
function delEmployee(str)
71![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
72
var node=xml.selectSingleNode("//employee[name='"+str+"']");
73
var lgg = new ActiveXObject("MSXML2.DOMDocument");
74
lgg.load(langg+".xml");
75
var del = lgg.documentElement.selectSingleNode('del');
76
if(!confirm(del.selectSingleNode('Text1').childNodes[0].xml
77
+ str + del.selectSingleNode('Text2').childNodes[0].xml))
78![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
79
return;
80
}
81
root.removeChild(node);
82
try
83![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
84
xml.save("employee.xml")
85
}catch(E)
86![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
87
alert(E.description);
88
}
89
showTable();
90
}
91
92
function sort(str)
93![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
94
order = str;
95
if(scending == "ascending")
96![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
97
scending = "descending";
98
}
99
else
100![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
101
scending = "ascending";
102
}
103
showTable();
104
}
105
106
function showTable()
107![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
108
xslProcessor.addParameter("currentPage", currentPage);
109
xslProcessor.addParameter("totelPage", GetTotlePage());
110
xslProcessor.addParameter("totelEmployee", GetTotleEmplyee());
111
xslProcessor.addParameter("pageSize", pageSize);
112
//定义要读取的Employee记录的范围
113
xslProcessor.addParameter("startEmployee", (currentPage-1)*pageSize);
114
xslProcessor.addParameter("endEmployee", currentPage*pageSize);
115
//排序
116
xslProcessor.addParameter("order", order);
117
xslProcessor.addParameter("scending", scending);
118
//语言切换
119
xslProcessor.addParameter("langg", langg);
120
xslProcessor.transform();
121
divContent.innerHTML = xslProcessor.output;
122
}
123
showTable();
124
125
function Edit(str)
126![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
127
var tmpObj = new Object();
128
tmpObj.XML = xml;
129
tmpObj.Ename = str;
130
var lgg = new ActiveXObject("MSXML2.DOMDocument");
131
lgg.load(langg+".xml");
132
tmpObj.lgg = lgg;
133
window.showModalDialog("edit.html",tmpObj,
134
"dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
135
showTable();
136
}
137
138
function firstPage()
139![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
140
currentPage = 1;
141
showTable();
142
}
143
144
function nextPage()
145![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
146
currentPage=currentPage+1;
147
showTable();
148
}
149
150
function prevPage()
151![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
152
currentPage=currentPage-1;
153
showTable();
154
}
155
156
function lastPage()
157![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
158
currentPage=GetTotlePage();
159
showTable();
160
}
161
</script>
162
</body>
163
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Add.html
1
<html>
2
<head>
3
<title>Untitled Page</title>
4
</head>
5
<body style="text-align: center" bgcolor="#D5ECFF">
6
<br/>
7
<h2 id="title" style="text-align: center" ><br/></h2>
8
<br />
9
<table>
10
<tr>
11
<td><span id="empName"></span>:</td>
12
<td><input id="ename" type="text" /></td>
13
</tr>
14
<tr>
15
<td><span id="empDept"></span>:</td>
16
<td><input id="dept" type="text" /></td>
17
</tr>
18
<tr>
19
<td><span id="empMemo"></span>:</td>
20
<td><input id="memo" type="text" /></td>
21
</tr>
22
</table>
23
<br />
24
25
<input id="save" type="button" value="" onclick="Save()" />
26
27
<input id="cancel" type="button" value="" onclick="Cancel()"/><br />
28
29
30
<script language="javascript" type="text/javascript">
31
var xml,root,lgg;
32
xml = window.dialogArguments.XML;
33
root=xml.documentElement;
34
lgg = window.dialogArguments.language;
35
var add = lgg.documentElement.selectSingleNode('add');
36
37
title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
38
empName.innerText = add.selectSingleNode('Name').childNodes[0].xml;
39
empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
40
empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
41
save.value = add.selectSingleNode('Save').childNodes[0].xml;
42
cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
43![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
44
function Save()
45![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
46
if(ename.value=="")
47![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
48
var notNull = add.selectSingleNode('NotNull').childNodes[0].xml;
49
alert(notNull);
50
return;
51
}
52
var em=xml.selectSingleNode("//employee[name='"+ename.value+"']");
53
if(em!=null)
54![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
55
var nameRepeat = add.selectSingleNode('NameRepeat').childNodes[0].xml;
56
alert(nameRepeat);
57
return;
58
}
59
var emp=xml.createElement("employee");
60
name1=xml.createElement("name");
61
name1.text=ename.value;
62
dept1=xml.createElement("dept");
63
dept1.text=dept.value;
64
memo1=xml.createElement("memo");
65
memo1.text=memo.value;
66
emp.appendChild(name1);
67
emp.appendChild(dept1);
68
emp.appendChild(memo1);
69
root.appendChild(emp);
70
try
71![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
72
xml.save("employee.xml")
73
}catch(E)
74![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
75
alert(E.description);
76
}
77
window.close();
78
}
79![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
80
function Cancel()
81![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
82
window.close();
83
}
84
</script>
85
</body>
86
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
edit.html
1
<html>
2
<head>
3
<title>Untitled Page</title>
4
</head>
5
<body style="text-align: center" bgcolor="#D5ECFF">
6
<br/>
7
<h2 id="title" style="text-align: center" ></h2>
8
<table>
9
<tr>
10
<td><span id="empname"></span>:</td>
11
<td><input id="ename" type="text" disabled="true" /></td>
12
</tr>
13
<tr>
14
<td><span id="empDept"></span>:</td>
15
<td><input id="dept" type="text" /></td>
16
</tr>
17
<tr>
18
<td><span id="empMemo"></span>:</td>
19
<td><input id="memo" type="text" /></td>
20
</tr>
21
</table>
22
<br />
23
24
<input id="save" type="button" value="" onclick="Save()" />
25
26
<input id="cancel" type="button" value="" onclick="Cancel()"/><br />
27
28
29
<script language="javascript" type="text/javascript">
30
var xml,root,lgg;
31
xml = window.dialogArguments.XML;
32
empName = window.dialogArguments.Ename;
33
ename.value = empName;
34
var oldEmp=xml.selectSingleNode("//employee[name='"+empName+"']");
35
dept.value = oldEmp.childNodes[1].childNodes[0].xml;
36
memo.value = oldEmp.childNodes[2].childNodes[0].xml;
37
38
root=xml.documentElement;
39
lgg = window.dialogArguments.lgg;
40
var add = lgg.documentElement.selectSingleNode('add');
41
42
title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
43
empname.innerText = add.selectSingleNode('Name').childNodes[0].xml;
44
empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
45
empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
46
save.value = add.selectSingleNode('Save').childNodes[0].xml;
47
cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
48![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
49
function Save()
50![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
51
var emp = xml.createElement("employee");
52
name1=xml.createElement("name");
53
name1.text=ename.value;
54
dept1=xml.createElement("dept");
55
dept1.text=dept.value;
56
memo1=xml.createElement("memo");
57
memo1.text=memo.value;
58
emp.appendChild(name1);
59
emp.appendChild(dept1);
60
emp.appendChild(memo1);
61
root.replaceChild(emp,oldEmp);
62
try
63![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
64
xml.save("employee.xml")
65
}catch(E)
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
67
alert(E.description);
68
}
69
window.close();
70
}
71![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
72
function Cancel()
73![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
74
window.close();
75
}
76
</script>
77
</body>
78
</html>
源代码下载:https://files.cnblogs.com/happyhippy/XML.rar(打开list.html查看效果)
现实效果图:
添加(zh):
![](https://www.cnblogs.com/images/cnblogs_com/happyhippy/100853/r_XSLT1.jpg)
修改(en):
![](https://www.cnblogs.com/images/cnblogs_com/happyhippy/100853/r_XSLT2.jpg)
删除(zh):
![](https://www.cnblogs.com/images/cnblogs_com/happyhippy/100853/r_XSLT3.jpg)
删除(en):
![](https://www.cnblogs.com/images/cnblogs_com/happyhippy/100853/r_XSLT4.jpg)
5. 没弄过CSS,所以没有做界面美化...