<!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
          {
              width: 100%;
          }
          .style3
          {
              width: 257px;
          }
          .style4
          {
              width: 257px;
              height: 21px;
          }
          .style6
          {
              height: 21px;
          }
          .style7
          {
              width: 257px;
              height: 23px;
          }
          .style8
          {
              height: 23px;
          }
          #Query
          {
              height: 21px;
              width: 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&nbsp;&nbsp;JavaScript DOM操作XML显示查询添加删除</span></strong>
       <br/><br/>  
          <div style="z-index:102;left:25px;width:550px;position:absolute;top:55px;height:60px">
   
      <table style="width: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>
                  &nbsp;&nbsp;
                  <input id="Add" type="button" value="添加"  onclick="return Add_onclick()" />&nbsp;&nbsp;  &nbsp;&nbsp;
                  <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>