| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>JavaScript DOM操作XML显示查询添加删除</title> | |
| <style type="text/css"> | |
| .style1 | |
| { | |
| font-size: xx-large; | |
| } | |
| .style2 | |
| { | |
| 100%; | |
| } | |
| .style3 | |
| { | |
| 257px; | |
| } | |
| .style4 | |
| { | |
| 257px; | |
| height: 21px; | |
| } | |
| .style6 | |
| { | |
| height: 21px; | |
| } | |
| .style7 | |
| { | |
| 257px; | |
| height: 23px; | |
| } | |
| .style8 | |
| { | |
| height: 23px; | |
| } | |
| #Query | |
| { | |
| height: 21px; | |
| 68px; | |
| } | |
| </style> | |
| <script language="javascript" type="text/javascript"> | |
| var xmlDoc = new ActiveXObject("Msxml2.DOMDocument"); | |
| xmlDoc.async = false; | |
| xmlDoc.load("student.xml"); | |
| function ShowAll_onclick() { | |
| ShowAllStudent(); | |
| } | |
| function ShowAllStudent() { | |
| var root = xmlDoc.documentElement; | |
| var firstNode = root.childNodes[0]; | |
| var content = firstNode.text + "<br>"; | |
| var nextNode = firstNode.nextSibling; | |
| while (nextNode != null) { | |
| content += nextNode.text + "<br>"; | |
| nextNode = nextNode.nextSibling; | |
| } | |
| var showAllDiv = document.getElementById("divShow"); | |
| showAllDiv.style.dispaly = "block"; | |
| showAllDiv.innerHTML = content; | |
| } | |
| function Query_onclick() { | |
| var userInput = document.getElementById("StudentID"); | |
| if (userInput.value == "") { | |
| alert("请输入学生学号！"); | |
| return; | |
| } | |
| var result = ""; | |
| oList = xmlDoc.documentElement.childNodes; | |
| for (var i = 0; i < oList.length; i++) { | |
| var node = xmlDoc.documentElement.childNodes[i]; | |
| if (userInput.value == node.childNodes[0].text) { | |
| result = node.text; | |
| document.getElementById("StudentName").value = node.childNodes[1].text; | |
| document.getElementById("Gender").value = node.childNodes[2].text; | |
| document.getElementById("Special").value = node.childNodes[3].text; | |
| document.getElementById("Math").value = node.childNodes[4].text; | |
| document.getElementById("English").value = node.childNodes[5].text; | |
| break; | |
| } | |
| } | |
| if (result != "") { | |
| alert("查询结果是：" + result); | |
| } | |
| else { | |
| document.getElementById("StudentName").value = ""; | |
| document.getElementById("Gender").value = ""; | |
| document.getElementById("Special").value = ""; | |
| document.getElementById("Math").value = ""; | |
| document.getElementById("English").value = ""; | |
| alert("未找到符合条件的同学！"); | |
| } | |
| } | |
| function showAllStudentName() { | |
| var content = ""; | |
| var root = xmlDoc.documentElement; | |
| var studentList = root.getElementsByTagName("姓名"); | |
| alert("学生人数（姓名个数）是：" + studentList.length); | |
| for (var i = 0; i < studentList.length; i++) { | |
| content += studentList[i].text + "<br>"; | |
| } | |
| var showAllDiv = document.getElementById("divShow"); | |
| showAllDiv.style.display = "block"; | |
| showAllDiv.innerHTML = content; | |
| } | |
| function ShowName_onclick() { | |
| showAllStudentName(); | |
| } | |
| function ShowAttribute_onclick() { | |
| var content = ""; | |
| var root = xmlDoc.documentElement; | |
| var studentList = root.getElementsByTagName("姓名"); | |
| for (var i = 0; i < studentList.length; i++) { | |
| var hobby = studentList[i].getAttribute("爱好"); | |
| if (hobby != null) | |
| content += studentList[i].text + "的爱好是：" + hobby + "<br/>"; | |
| } | |
| if (content == "") { | |
| alert("未能找到任何“爱好”信息！"); | |
| return; | |
| } | |
| var showAllDiv = document.getElementById("divShow"); | |
| showAllDiv.style.display = "block"; | |
| showAllDiv.innerHTML = content; | |
| } | |
| function Add_onclick() { | |
| if (document.getElementById("StudentID").value == "") { | |
| alert("请输入学号！"); | |
| return; | |
| } | |
| if (document.getElementById("StudentName").value == "") { | |
| alert("请输入姓名！"); | |
| return; | |
| } | |
| if (document.getElementById("Gender").value == "") { | |
| alert("请输入性别！"); | |
| return; | |
| } | |
| if (document.getElementById("Special").value == "") { | |
| alert("请输入专业！"); | |
| return; | |
| } | |
| if (document.getElementById("Math").value == "") { | |
| alert("请输入数学成绩！"); | |
| return; | |
| } | |
| if (document.getElementById("English").value == "") { | |
| alert("请输入英语成绩！"); | |
| return; | |
| } | |
| oList = xmlDoc.documentElement.childNodes; | |
| var userInput=document.getElementById("StudentID") | |
| for (var i = 0; i < oList.length; i++) { | |
| var node = xmlDoc.documentElement.childNodes[i]; | |
| if (userInput.value == node.childNodes[0].text) { | |
| var temp = confirm("该同学的信息已经存在确认更新吗"); | |
| if (temp == true) { | |
| node.childNodes[1].text = document.getElementById("StudentName").value; | |
| node.childNodes[2].text = document.getElementById("Gender").value; | |
| node.childNodes[3].text = document.getElementById("Special").value; | |
| node.childNodes[4].text = document.getElementById("Math").value; | |
| node.childNodes[5].text = document.getElementById("English").value; | |
| var content = ""; | |
| var nodesList = xmlDoc.documentElement.childNodes; | |
| alert("已成功添加一位新同学，现在学生人数是：" + nodesList.length); | |
| for (var i = 0; i < nodesList.length; i++) { | |
| content += nodesList[i].text + "<br/>"; | |
| } | |
| var showAllDiv = document.getElementById("divShow"); | |
| showAllDiv.style.display = "block"; | |
| showAllDiv.innerHTML = content; | |
| return; | |
| } | |
| else | |
| return; | |
| } | |
| } | |
| var root = xmlDoc.documentElement; | |
| var student = xmlDoc.createElement("学生"); | |
| var child1 = xmlDoc.createElement("学号"); | |
| child1.text = document.getElementById("StudentID").value; | |
| student.appendChild(child1); | |
| var child2 = xmlDoc.createElement("姓名"); | |
| child2.text = document.getElementById("StudentName").value; | |
| student.appendChild(child2); | |
| var child3 = xmlDoc.createElement("姓别"); | |
| child3.text = document.getElementById("Gender").value; | |
| student.appendChild(child3); | |
| var child4 = xmlDoc.createElement("专业"); | |
| child4.text = document.getElementById("Special").value; | |
| student.appendChild(child4); | |
| var child5 = xmlDoc.createElement("数学"); | |
| child5.text = document.getElementById("Math").value; | |
| student.appendChild(child5); | |
| var child6 = xmlDoc.createElement("英语"); | |
| child6.text = document.getElementById("English").value; | |
| student.appendChild(child6); | |
| root.appendChild(student); | |
| var content = ""; | |
| var nodesList = xmlDoc.documentElement.childNodes; | |
| alert("已成功添加一位新同学，现在学生人数是：" + nodesList.length); | |
| for (var i = 0; i < nodesList.length; i++) { | |
| content += nodesList[i].text + "<br/>"; | |
| } | |
| var showAllDiv = document.getElementById("divShow"); | |
| showAllDiv.style.display = "block"; | |
| showAllDiv. innerHTML = content; | |
| } | |
| function Delete_onclick() { | |
| var userInputTextBox = document.getElementById("StudentID"); | |
| var userInputID = userInputTextBox.value; | |
| if (userInputID == "") { | |
| alert("请输入学生学号！"); | |
| return; | |
| } | |
| var root = xmlDoc.documentElement; | |
| var stu = xmlDoc.selectSingleNode("学生名单/学生/学号[text()='" + userInputID + "']"); | |
| if (stu == null) { | |
| alert("未找到学号为“" + userInputID + "”的同学！"); | |
| return; | |
| } | |
| var stuNode = stu.parentNode; | |
| root.removeChild(stuNode); | |
| document.getElementById("StudentName").value = ""; | |
| document.getElementById("Gender").value = ""; | |
| document.getElementById("Special").value = ""; | |
| document.getElementById("Math").value = ""; | |
| document.getElementById("English").value = ""; | |
| alert("您已成功删除了学号为“" + userInputID + "”的同学！"); | |
| ShowAllStudent(); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <br/> | |
| <strong><span style="font-size:16pt">实验C JavaScript DOM操作XML显示查询添加删除</span></strong> | |
| <br/><br/> | |
| <div style="z-index:102;left:25px;550px;position:absolute;top:55px;height:60px"> | |
| <table style="550px;"> | |
| <tr> | |
| <td align="right" >请输入学号：</td> | |
| <td> | |
| <input id="StudentID" type="text" /></td> | |
| <td> | |
| <input id="ShowAll" type="button" value="全部显示" | |
| onclick="return ShowAll_onclick()" /></td> | |
| <td> | |
| <input id="ShowName" type="button" value="显示姓名" | |
| onclick="return ShowName_onclick()" /></td> | |
| <td> | |
| <input id="ShowAttribute" type="button" value="显示属性" onclick="return ShowAttribute_onclick()" /></td> | |
| </tr> | |
| <tr> | |
| <td align="right">姓名：</td><td><input id="StudentName" type="text" /></td><td colspan="3"></td> | |
| </tr> | |
| <tr> | |
| <td align="right" >性别：</td><td><input id="Gender" type="text" /></td><td colspan="3"></td> | |
| </tr> | |
| <tr> | |
| <td align="right">专业：</td><td><input id="Special" type="text" /></td><td colspan="3"></td> | |
| </tr> | |
| <tr> | |
| <td align="right" >数学：</td><td><input id="Math" type="text" /></td><td colspan="3"></td> | |
| </tr> | |
| <tr> | |
| <td align="right">英语：</td><td><input id="English" type="text" /></td><td colspan="3"></td> | |
| </tr> | |
| <tr> | |
| <td align="right"> | |
| <input id="Query" type="button" value="查询" onclick="return Query_onclick()" /></td> | |
| <td> | |
| | |
| <input id="Add" type="button" value="添加" onclick="return Add_onclick()" /> | |
| <input id="Delete" type="button" value="删除" onclick="return Delete_onclick()" /></td><td colspan="3"></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div id="divShow" style="z-index:1;left:366px;top:100px;position:absolute;background-color:#FFFF00;display:none;" > | |
| </div> | |
| </body> | |
| </html> | |