動態建立表格js檔案,javascript，Ajax，DHTML動態實現表格的建立，動態讀取XML中的檔案，讀取dom節點的例子。

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

testDom.jsp檔案

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>testDomAjax.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#td1{color:red;font-size:30px;}

</style>
   <script type="text/javascript">
  var xmlHttp;
  function createXMLHttpRequest(){
   if(window.XMLHttpRequest)
   {
    xmlHttp = new XMLHttpRequest();
   }else if(window.ActiveXObject)
   {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
  }
  function startRequest(){
   createXMLHttpRequest();

   window.status ='';
   url ="DomXml.xml";
   xmlHttp.open("GET",url,true);
   xmlHttp.onreadystatechange = testDom;
   xmlHttp.send(null);
  }

  function testDom(){
   if (xmlHttp.readyState == 4)
   {
    if (xmlHttp.status == 200 || xmlHttp.status == 0)
    {
     resText = xmlHttp.responseXML;
     //alert(resText);
     var peoples=resText.getElementsByTagName("property");
     alert(peoples.length);
     for(var i=0;i<peoples.length;i++){
      //迴圈顯示所有的使用者名稱稱，性別
      alert(peoples[i].getElementsByTagName("name")[0].firstChild.nodeValue);
      alert(peoples[i].getElementsByTagName("sex")[0].firstChild.nodeValue);
     }

    var pro=peoples[0].childNodes;
    for(var i=0;i<pro.length;i++){
     var temp=pro[i].childNodes;
     for(var k=0;k<temp.length;k++){

     }

    }
     //alert(
    //alert(resText.getElementsByTagName("property")[0].childNodes[0].nodeValue);
    var pro=resText.getElementsByTagName("property");

    if(pro[0].hasChildNodes()==true){
     if(pro[0].childNodes[0].hasChildNodes()==true){
      var a=pro[0].childNodes[0];
      //alert(a.firstChild.nodeValue);
      if(a.hasChildNodes()==true){
      // alert(true+"1");
      }else{
       alert(false+"1");
      }
     }else{
      alert("false");
     }
    }else{
     alert("false");
    }
    ////////////////////////////////////////////////
    /////重點解析DOM樹形節點
    ///////////////////////////////////////////////
    var p=resText.getElementsByTagName("love");
    //alert(p[0].childNodes[0].firstChild.nodeValue);
    //alert(p[0].nextSibling.childNodes[0].nodeValue);
    //alert(p[0].childNodes[0].nextSibling.childNodes[0].nodeValue);

    //alert(p[0].childNodes[0].lastChild.nodeValue);
    //name
    var p=resText.getElementsByTagName("name");
   // alert(p[0].firstChild.nodeValue+"1");
   // alert(p[0].lastChild.nodeValue+"2");
   // alert(p[0].childNodes[0].nodeValue+"3");
    //alert(p[1].getAttribute("value")+"4");


    }
   }
  }
var i=1;
//動態建立樹形節點。表格Dom
function createNode(){
  var body=document.getElementById("body1");
  var dv=document.getElementById("message");
  var table=document.createElement("table");
  var tbody=document.createElement("tbody");
  //設定節點的屬性。
  table.setAttribute("border","1");
  var tr=document.createElement("tr");
  var td1=document.createElement("td");
  var td3=document.createElement("td");
  td1.setAttribute("id","td1");
  var td2=document.createElement("td");
  //添加靜態文本資訊。
  var txt1=document.createTextNode("姓名");
  var txt2=document.createTextNode("性別");
  var txt3=document.createTextNode("編號"+i);

  td1.appendChild(txt1);
  td2.appendChild(txt2);
  td3.appendChild(txt3);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tbody.appendChild(tr);
  table.appendChild(tbody);
  body.appendChild(table);
  i=i++;
  //document.write(table);
}

</script>

</head>

<body id="body1">
    <form name="from1" method="get">
    <input type="button" value="button" onclick="startRequest();"/>

    <input type="button" value="createNode" onclick="createNode();"/>
    </form>
    <table border=1>
    <tr>
      <td id="td1">zhai</td>
      <Td>sadfadsf</Td>
      <Td>zhai</Td>

    </tr>
    </table>
    <div id="message"></div>
</body>
</html>

//testXMLAjax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>testXMLAjax.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
<script type="text/javascript">
  var xmlHttp;
  function createXMLHttpRequest(){
   if(window.XMLHttpRequest)
   {
    xmlHttp = new XMLHttpRequest();
   }else if(window.ActiveXObject)
   {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

  }

  function startRequest(){
   createXMLHttpRequest();

   window.status ='';
   url ="testXML.xml";
   xmlHttp.open("GET",url,true);
   xmlHttp.onreadystatechange = testInnerHTML;
   xmlHttp.send(null);
  }

  function testInnerHTML(){
   if (xmlHttp.readyState == 4)
   {
    if (xmlHttp.status == 200 || xmlHttp.status == 0)
    {
     resText = xmlHttp.responseText;
     var div=document.getElementById("message");
     div.innerHTML=resText;

    }
   }
  }

</script>
</head>

<body>
    <form name="from1" method="get">
    <input type="button" value="button" onclick="startRequest();"/>

    </form>

    <div id="message"></div>
</body>
</html>

//////DomXml.xml

<?xml version="1.0" encoding="UTF-8"?>
<xml-body>
<properties>
  <property>
   <name value="userName">zhaizhanpo11</name>
   <sex>男</sex>
   <password>123456</password>
   <love>
    <love1>足球</love1>
    <love1>籃球</love1>
    <love1>乒乓球</love1>
   </love>
   <tel>13810116246</tel>
  </property>

  <property>
   <name value="luzhongtao">luzhongtao</name>
   <sex>女</sex>
   <password>123456</password>
   <love>
    <love1>足球</love1>
    <love1>籃球</love1>
    <love1>乒乓球</love1>
   </love>
   <tel>13511110000</tel>
  </property>
</properties>
</xml-body>

///textXML.xml

<?xml version="1.0" encoding="UTF-8"?>
<xml-body>
<table>
  <tbody>
   <tr>
    <th>usrname</th>
    <th>password</th>
    <th>userSex</th>
   </tr>

   <tr>
    <td>zhaizhanpo</td>
    <td>zhaizhanpo</td>
    <td>男</td>
   </tr>

   <tr>
    <td>luzhasdongtao</td>
    <td>luzhasdongtao</td>
    <td>女</td>
   </tr>

   <tr>
    <td>zhaizhasdanpo</td>
    <td>zhaizasdasdhanpo</td>
    <td>男</td>
   </tr>

   <tr>
    <td>luzhoaaangtao</td>
    <td>luzhoassngtao</td>
    <td>女</td>
   </tr>

   <tr>
    <td>zhaizhddffanpo</td>
    <td>zhaizhanpo</td>
    <td>男</td>
   </tr>

   <tr>
    <td>luzhonddawdgtao</td>
    <td>luzhongtao</td>
    <td>女</td>
   </tr>
  </tbody>

</table>
</xml-body>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More