动态创建表格js文件,javascript，Ajax，DHTML动态实现表格的创建，动态读取XML中的文件，读取dom节点的例子。

最新推荐文章于 2024-09-23 08:37:48 发布

zhaizhanpo

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量2.2k

点赞数

分类专栏： DHTML Ajax相关文档文章标签： javascript ajax xml xmlhttprequest button function

本文链接：https://blog.csdn.net/zhaizhanpo/article/details/2989469

版权

Ajax相关文档同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

DHTML

2 篇文章 0 订阅

订阅专栏

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" οnclick="startRequest();"/>

    <input type="button" value="createNode" οnclick="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" οnclick="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>