动态获取xml数据内容和动态创建Table

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
var xmlhttp;
function GetData() 
{
    //创建异步对象
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    //判断状态事件的方法
    xmlhttp.onreadystatechange=statechange;
    //加载XML文件
    xmlhttp.open("GET","XMLFile.xml",true);
    xmlhttp.send(null);
        
}

function statechange()
{

 
   //判断异步获取数据是否已经成功完成
   if(xmlhttp.readystate==4 && xmlhttp.status==200)
      {
          //动态创建元素显示获取的数据
         
          dynamicView(xmlhttp.responseXML);
      }
}

function dynamicView(dom)
{

//创建Table
var domhead=document.getElementById("divlist");
var tb1=document.createElement("table");
tb1.setAttribute("border","1");
tb1.setAttribute("width","617px");
//创建Table的表头-姓名，年龄，地址
var tr1=tb1.insertRow();//创建行
var td1=tr1.insertCell();//创建列
td1.innerText="姓名";//创建列值
var td2=tr1.insertCell();
td2.innerText="年龄";
var td3=tr1.insertCell();
td3.innerText="地址";
//使用DOM方法创建页面中的动态表格-循环创建行
var xmldom=dom.childNodes[1];
for(var i=0;i<xmldom.childNodes.length;i++)
 {
  var _tr=tb1.insertRow();//创建行 
    for(var j=0;j<xmldom.childNodes[i].childNodes.length;j++)
    {
     var _td=_tr.insertCell();//创建列
     _td.innerText=xmldom.childNodes[i].childNodes[j].text;//创建列值
    }
 }

domhead.appendChild(tb1);

}
// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div>
        <input id="Button1" type="button" value="CreateTable" onclick="return GetData()" />
      </div>
     <div id="divlist"></div>
        
    </form>
</body>
</html>
posted @ 2008-09-02 16:42  ike_li  阅读(561)  评论(0)    收藏  举报