1
<html>
2<head>
3 <title>Javascript 操作 XML 示例</title>
4
5
<script language="javascript">
6
/**//*
7
* Create By HJ
8 * 2008-6-29
9
*/
10 var pageSize,pageIndex,rowCount,pageCount;
11 var doc,sourceFile,dataTable;
12 var btFirst,btPrevious,btNext,btLast;
13 var newsID,newsTitle,newsBody;
14 var cmd;
15 /// 第一次加载页面方法，初始化变量值
16 function page_Load()
17 {
18 btFirst = document.getElementById("btFirst");
19 btPrevious = document.getElementById("btPrevious");
20 btNext = document.getElementById("btNext");
21 btLast = document.getElementById("btLast");
22 dataTable = document.getElementById("dataTable");
23
24 btFirst.onclick = firstPage;
25 btPrevious.onclick = previousPage;
26 btNext.onclick = nextPage;
27 btLast.onclick = lastPage;
28
29 pageIndex = 1;
30 sourceFile = "news.xml";
31 doc = new ActiveXObject("Microsoft.XMLDOM");
32 doc.load(sourceFile);
33 /// 加上该语句，可以设置 js 支持 xpath
34 doc.setProperty("SelectionLanguage","XPath");
35
36 createPageInfo();
37 }
38
39 /// 创建页面数据内容
40 function createPageInfo()
41 {
42 var startIndex;
43 var keyword,items;
44 keyword = document.getElementById("txtSearchValue").value.trim();
45 removePageInfo();
46 if(keyword != "")
47 {
48 items = doc.selectNodes("Data/Item[contains(.,'"+keyword+"')]");
49 }
50 else
51 {
52 items = doc.getElementsByTagName("Item");
53 }
54 rowCount = items.length;
55 if(rowCount == 0)
56 {
57 pageIndex = 1;
58 pageCount = 1;
59 pageStatus();
60 return;
61 }
62 /// 获取页面显示数据量
63 pageSize = document.getElementById("txtPageSize").value;
64 /// 计算总页数
65 pageCount = parseInt(rowCount / pageSize);
66 if(pageCount * pageSize < rowCount)
67 {
68 pageCount ++;
69 }
70 /// 防止 pageIndex 超出
71 if(pageIndex > pageCount) pageIndex = pageCount;
72
73 /// 计算当前页面起始记录地址
74 startIndex = (pageIndex-1) * pageSize;
75
76 document.getElementById("ShowRowCount").innerText = rowCount;
77 document.getElementById("ShowPageIndex").innerText = pageIndex;
78 document.getElementById("ShowPageCount").innerText = pageCount;
79
80 /// 获取当前页面数据
81 for(var i = startIndex;i<startIndex+parseInt(pageSize);i++)
82 {
83 if(i>=rowCount) break;
84 newsID = items[i].getAttribute("id");
85 newsTitle = items[i].selectSingleNode("NewsTitle").text;
86 newsBody = items[i].selectSingleNode("NewsBody").text;
87 /// 创建标题行
88 var titleRow = dataTable.insertRow(dataTable.rows.length);
89 var titleID = document.createAttribute("ID");
90 titleID.value="NewsTitle"+newsID;
91 titleRow.setAttributeNode(titleID);
92
93 /// 复选框
94 var cell1 = titleRow.insertCell();
95 cell1.innerHTML = "<input type=\"checkbox\" id=\"chkDel\">";
96 var align = document.createAttribute("align");
97 align.value="center";
98 cell1.setAttributeNode(align);
99
100 /// 显示/隐藏
101 var cell2 = titleRow.insertCell();
102 cell2.innerHTML = "<a href=\"#\" onclick=\"showNewsBody(this,'NewsBody"+newsID+"');\">显示</a>";
103 var align1 = document.createAttribute("align");
104 align1.value="center";
105 cell2.setAttributeNode(align1);
106
107 /// 标题
108 var cell3 = titleRow.insertCell();
109 cell3.innerText = newsTitle;
110
111 /// 编辑
112 var cell4 = titleRow.insertCell();
113 cell4.innerHTML = "<a href=\"#\" onclick=\"editNews('"+newsID+"');\">编辑</a>";
114 var align2 = document.createAttribute("align");
115 align2.value="center";
116 cell4.setAttributeNode(align2);
117
118 /// 创建正文行
119 var bodyRow = dataTable.insertRow(dataTable.rows.length);
120 var bodyID = document.createAttribute("ID");
121 bodyID.value="NewsBody"+newsID;
122 bodyRow.setAttributeNode(bodyID);
123 bodyRow.style.display = "none";
124
125 /// 正文数据
126 var cell5 = bodyRow.insertCell();
127 cell5.innerHTML = newsBody;
128 var colspan = document.createAttribute("colspan");
129 colspan.value="4";
130 cell5.setAttributeNode(colspan);
131 /**//*
132 */
133 }
134
135 pageStatus();
136 }
137
138 /// 移除页面数据内容
139 function removePageInfo()
140 {
141 var trs = dataTable.childNodes[0].childNodes;
142 if(trs.length > 0)
143 {
144 for(var i = 0;i<trs.length;i++)
145 {
146 if(trs[i].id.indexOf("News") > -1)
147 {
148 dataTable.deleteRow(i);
149 i--;
150 }
151 }
152 }
153 }
154
155 /// 首页
156 function firstPage()
157 {
158 pageIndex = 1;
159 createPageInfo();
160 }
161
162 /// 下一页
163 function nextPage()
164 {
165 pageIndex++;
166 createPageInfo();
167 }
168
169 /// 上一页
170 function previousPage()
171 {
172 pageIndex--;
173 createPageInfo();
174 }
175
176 /// 末页
177 function lastPage()
178 {
179 pageIndex = pageCount;
180 createPageInfo();
181 }
182
183 /// 控制翻页状态
184 function pageStatus()
185 {
186 btFirst.disabled = true;
187 btPrevious.disabled = true;
188 btNext.disabled = true;
189 btLast.disabled = true;
190 btFirst.onclick = "";
191 btPrevious.onclick = "";
192 btNext.onclick = "";
193 btLast.onclick = "";
194
195 if(pageIndex > 1)
196 {
197 btFirst.disabled = false;
198 btPrevious.disabled = false;
199 btFirst.onclick = firstPage;
200 btPrevious.onclick = previousPage;
201 }
202 if(pageIndex < pageCount)
203 {
204 btNext.disabled = false;
205 btLast.disabled = false;
206 btNext.onclick = nextPage;
207 btLast.onclick = lastPage;
208 }
209 var obj = document.getElementById("tableEdit");
210 obj.style.display = "none";
211 }
212
213 /// 检验表单输入是否完整
214 function validation()
215 {
216 newsTitle = document.getElementById("txtNewsTitle").value.trim();
217 if(newsTitle == "")
218 {
219 alert("请输入新闻标题!");
220 document.getElementById("txtNewsTitle").focus();
221 return false;
222 }
223 newsBody = document.getElementById("txtNewsBody").value.trim();
224 if(newsBody == "")
225 {
226 alert("请输入新闻内容!");
227 document.getElementById("txtNewsBody").focus();
228 return false;
229 }
230 /// 替换 JS 回车符号和空格符号
231 newsBody = newsBody.replace(/\r\n/ig,"<br>").replace(" "," ");
232 return true;
233 }
234
235 String.prototype.trim = function()
236 {
237 // 用正则表达式将前后空格
238 // 用空字符串替代。
239 return this.replace(/(^\s*)|(\s*$)/g,"");
240 }
241
242 /// 添加新闻操作
243 function addNews()
244 {
245 var obj = document.getElementById("tableEdit");
246 obj.style.display = "block";
247 cmd = "Add";
248 document.getElementById("txtNewsTitle").value = "";
249 document.getElementById("txtNewsBody").value = "";
250 }
251
252 /// 撤销操作
253 function cancel()
254 {
255 var obj = document.getElementById("tableEdit");
256 obj.style.display = "none";
257 cmd = "";
258 }
259
260 /// 保存方法
261 function Save()
262 {
263 if(cmd == "Add")
264 {
265 addNew();
266 }
267 else if(cmd == "Edit")
268 {
269 editNew();
270 }
271 createPageInfo();
272 }
273
274 /// 新增新闻内容
275 function addNew()
276 {
277 if(!validation()) return;
278 /// 创建一个 GUID 做为新闻 ID
279 var TypeLib = new ActiveXObject("Scriptlet.TypeLib");
280 newsID = TypeLib.Guid;
281
282 /// 创建新闻节点
283 var item = doc.createElement("Item");
284 /// 添加 id 属性
285 var id = doc.createAttribute("id");
286 id.value = newsID;
287 item.setAttributeNode(id);
288 /// 创建新闻标题节点
289 var titleNode = doc.createElement("NewsTitle");
290 titleNode.text = newsTitle;
291 item.appendChild(titleNode);
292 /// 创建新闻内容节点
293 var bodyNode = doc.createElement("NewsBody");
294 bodyNode.text = newsBody;
295 item.appendChild(bodyNode);
296 doc.documentElement.appendChild(item);
297 saveXml();
298 }
299
300 /// 修改新闻操作
301 function editNews(id)
302 {
303 newsID = id;
304 var item = doc.selectSingleNode("Data/Item[@id='"+newsID+"']");
305 if(item != null)
306 {
307 newsTitle = item.selectSingleNode("NewsTitle").text;
308 newsBody = item.selectSingleNode("NewsBody").text;
309 while(newsBody.indexOf("<br>")> -1)
310 {
311 newsBody = newsBody.replace("<br>","\r")
312 }
313 newsBody= newsBody.replace(" "," ");
314 document.getElementById("txtNewsTitle").value = newsTitle;
315 document.getElementById("txtNewsBody").value = newsBody;
316 var obj = document.getElementById("tableEdit");
317 obj.style.display = "block";
318 cmd = "Edit";
319 }
320 }
321
322 /// 修改新闻内容
323 function editNew()
324 {
325 if(!validation()) return;
326
327 var item = doc.selectSingleNode("Data/Item[@id='"+newsID+"']");
328 if(item != null)
329 {
330 item.selectSingleNode("NewsTitle").text = newsTitle;
331 item.selectSingleNode("NewsBody").text = newsBody;
332 }
333 saveXml();
334 }
335
336 /// 删除新闻操作
337 function deleteNews()
338 {
339 if(!confirm("确认删除所选项吗？"))
340 {
341 return false;
342 }
343
344 var checkboxs = document.getElementsByTagName("input");
345 if(checkboxs.length > 0)
346 {
347 for(var i = 0;i<checkboxs.length;i++)
348 {
349 if(checkboxs[i].type=="checkbox" && checkboxs[i].id.indexOf("chkDel")> -1 && checkboxs[i].checked)
350 {
351 newsID = checkboxs[i].parentNode.parentNode.id.substring(("NewsTitle").length);
352 deleteNew(newsID);
353 }
354 }
355
356 }
357 createPageInfo();
358 }
359 /// 删除新闻
360 function deleteNew(id)
361 {
362 var item = doc.selectSingleNode("Data/Item[@id='"+id+"']");
363 if(item != null)
364 {
365 doc.documentElement.removeChild(item);
366 }
367 saveXml();
368 }
369
370 /// 保存 XML
371 function saveXml()
372 {
373 /**//*
374 var xmlbody = doc.documentElement.xml;
375 xmlbody = "<?xml version=\"1.0\" encoding=\"gb2312\" ?>" + xmlbody;
376 doc.loadXML(xmlbody);
377 doc.save(sourceFile);
378 */
379 var fso, tempfolder, xmlfile, schar;
380 fso = new ActiveXObject("Scripting.FileSystemObject");
381 tempfolder = fso.GetSpecialFolder(0);
382 /// 路径问题未解决
383 xmlfile = fso.CreateTextFile("D:\\代码相关_JavaScript\\news.xml",true,true);
384 schar = '\r';
385 xmlfile.WriteLine('<?xml version="1.0" encoding="UTF-16" ?>'+schar);
386 xmlfile.WriteLine(doc.documentElement.xml);
387 xmlfile.Close();
388 }
389
390 /// 控制文本框只输入数字
391 function numberText()
392 {
393 if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57)) || (window.event.keyCode == 13) || (window.event.keyCode == 46) || (window.event.keyCode == 45))){
394 window.event.keyCode = 0 ;
395 }
396 }
397
398 /// 全选
399 function selectAll(status)
400 {
401 var checkboxs = document.getElementsByTagName("input");
402 if(checkboxs.length > 0)
403 {
404 for(var i = 0;i<checkboxs.length;i++)
405 {
406 if(checkboxs[i].type=="checkbox" && checkboxs[i].id.indexOf("chkDel")> -1)
407 {
408 checkboxs[i].checked = status;
409 }
410 }
411 }
412 }
413
414 /// 显示/隐藏 正文
415 function showNewsBody(obj,bodyID)
416 {
417 var body = document.getElementById(bodyID);
418 if(body == null) return;
419
420 if(body.style.display == "none")
421 {
422 body.style.display = "block";
423 obj.innerText = "隐藏";
424 }
425 else
426 {
427 body.style.display = "none";
428 obj.innerText = "显示";
429 }
430 }
431
432 /// JS获取绝对路径方法，测试不成功 \文件名。 \n 就没用了
433 function serverMapPath(s)
434 {
435 var m = new Image();
436 m.src = s;
437 return m.src;
438 }
439 /**//**/
440
</script>
441
442 <link href="css/css.css" rel="stylesheet" type="text/css">
443</head>
444<body>
445 <form name="myform">
446 <table id="tableEdit" border="1" cellpadding="0" cellspacing="0" align="center" width="90%" style="display:none">
447 <tr bgcolor="Gainsboro">
448 <td colspan="2">
449 编辑新闻信息
450 </td>
451 </tr>
452 <tr>
453 <td>
454 新闻标题：</td>
455 <td>
456 <input id="txtNewsTitle" type="text" maxlength="50" style="width: 600px" /></td>
457 </tr>
458 <tr>
459 <td>
460 新闻内容：</td>
461 <td>
462 <textarea id="txtNewsBody" rows="10" style="width: 600px"></textarea></td>
463 </tr>
464 <tr>
465 <td colspan="2" align="center">
466 <input type="button" id="btSave" value="Save" onclick="Save();" />
467 <input type="button" id="btCancel" value="Cancel" onclick="cancel();"/>
468 </td>
469 </tr>
470 </table>
471 <table id="dataTable" border="1" cellpadding="0" cellspacing="0" align="center" width="90%">
472 <tr>
473 <td align="center" colspan="4">
474 <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
475 <tr>
476 <td bgcolor="Gainsboro">
477 查询：
478 </td>
479 <td>
480 <input type="text" id="txtSearchValue" maxlength="50" />
481 </td>
482 <td>
483 <input id="btSearch" type="button" value="Search" onclick="createPageInfo();"/>
484 </td>
485 <td>
486 每页显示记录数：<input type="text" id="txtPageSize" size="10" value="10" maxlength="3" onkeypress="numberText();" />
487 </td>
488 <td>
489 总记录数：<font color="red" id="ShowRowCount"></font>,页码<font color="red" id="ShowPageIndex"></font>/<font color="red" id="ShowPageCount"></font>
490 <a href="#" id="btFirst" onclick="">首页</a> <a href="#" id="btPrevious" onclick="">上页</a>
491 <a href="#" id="btNext" onclick="">下页</a> <a href="#" id="btLast" onclick="">末页</a>
492 </td>
493 <td>
494 <input type="button" id="btAdd" value="AddNew" onclick="addNews();" />
495 <input type="button" id="btDelete" value="Delete" onclick="return deleteNews();" />
496 </td>
497 </tr>
498 </table>
499 </td>
500 </tr>
501 <tr bgcolor="Gainsboro">
502 <td align="center" width="50px">
503 <input type="checkbox" id="chkAll" onclick="javascript:selectAll(this.checked);" />
504 </td>
505 <td align="center" width="50px">
506 <b>明细</b>
507 </td>
508 <td align="center" width="700px">
509 <b>新闻标题</b>
510 </td>
511 <td align="center" width="50px">
512 <b>编辑</b>
513 </td>
514 </tr>
515 </table>
516 </form>
517
518 <script language="javascript">
519 page_Load();
520 </script>
521
522</body>
523</html>
Xml
************************************
1<?xml version="1.0" encoding="UTF-16" ?>
2<Data>
3<Item id="{C960F5F0-43A8-41ED-93DB-398BFDD75F00}">
4<NewsTitle>新闻标题</NewsTitle>
5<NewsBody>新闻内容</NewsBody>
6</Item>
7</Data>