实验A javaScript XML数据操作按姓名查询
| <!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></title> | |
| <script language="javascript" type="text/javascript"> | |
| function Button1_onclick() { | |
| var userInput = document.getElementById("Text1"); | |
| if (userInput.value == "") { | |
| alert("请输入学生姓名"); | |
| return; | |
| } | |
| var result = ""; | |
| var xmlDoc=new ActiveXObject("Msxml2.DOMDocument"); | |
| xmlDoc.async=false; | |
| xmlDoc.load("student.xml"); | |
| oList = xmlDoc.documentElement.childNodes; | |
| for (var i = 0; i < oList.length; i++) | |
| { | |
| var node = xmlDoc.documentElement.childNodes[i]; | |
| if (userInput.value == node.childNodes[1].text) { | |
| result = node.text; | |
| break; | |
| } | |
| } | |
| if (result!="") | |
| alert(result); | |
| else | |
| alert("未找到该同学"); | |
| } | |
| function Button2_onclick() { | |
| var showAllButton = document.getElementById("Button2"); | |
| var showAllDiv = document.getElementById("divTableShow"); | |
| if (showAllButton.value == "全部显示") { | |
| showAllDiv.style.display = "block"; | |
| showAllButton.value = "仅有查询"; | |
| } | |
| else { | |
| showAllButton.value = "全部显示"; | |
| showAllDiv.style.display = "none"; | |
| } | |
| var xmlDoc = new ActiveXObject("Msxml2.DOMDocument"); | |
| xmlDoc.async = false; | |
| xmlDoc.load("student.xml"); | |
| 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; | |
| } | |
| showAllDiv.innerHTML = content; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <span style="font-size: 16pt"> | |
| <strong>学生信息查询</strong></span> | |
| <div style="z-index: 102; left: 126px; 1008px; position: absolute; top: 52px; height: 60px" > | |
| <table style=" 100%;"> | |
| <tr> | |
| <td class="style3"> | |
| | |
| 请输入学生姓名</td> | |
| <td class="style5"> | |
| | |
| <input id="Text1" type="text" /></td> | |
| <td class="style1"> | |
| | |
| <input id="Button1" type="button" value="查询" onclick="return Button1_onclick()" /> | |
| <span style="font-size: 16pt"> | |
| <strong> | |
| <input id="Button2" type="button" value="全部显示" onclick="return Button2_onclick()" /></strong></span></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div id="divTableShow" style="z-index: 1;left: 764px; 300px; position: absolute; top: 99px; height: 420px; background-color: #FFFF00; display:none;"> | |
| </div> | |
| </body> | |
| </html> | |
和student.xml 放在一个文件夹中打开