Dom解析XML动态绘制表格.

luozhangwen 2010-10-29 10:46:00



<html>

	<script>

		  function DomUtil(){}

		  

	    DomUtil.initDomDoc = function()

	    {

	    	 var signatures = ["Msxml2.DOMDocument.5.0","Msxml2.DOMDocument.4.0","Msxml2.DOMDocument.3.0","Msxml2.DOMDocument","MicroSoft.XmlDom"];

			    for(var i=0;i<signatures.length;i++)

			    {

			        try

			        {

			            var domDoc = new ActiveXObject(signatures[i]);

			            if(domDoc!=null)

			            {

			                return domDoc;

			            }

			        }

			        catch(e)

			        {

			            alert("Dom初始化失败!")

			        }

			    }

	    }

	    //根据文件的相对路径的文件名来创建xmlDoc

	    DomUtil.loadXmlForPath = function(path)

	    {

	    	var domDoc = DomUtil.initDomDoc();

	    	domDoc.async = false;

	    	domDoc.load(path);

	    	return domDoc;

	    }

	    //根据XML格式个字符串来创建xmlDoc

	    DomUtil.loadXmlForString = function(str)

	    {

	    	var domDoc = DomUtil.initDomDoc();

	    	domDoc.async = false;

	    	domDoc.loadXML(str);

	    	return domDoc;

	    }

	      

	    var xmlDom;  //全局的xmlDom对象

	    

	    //页面初始化的时候加载xml

	    function load()

	    { 	

	    	  xmlDom = DomUtil.loadXmlForPath("class.xml");

	    	  //得到XML的根元素	  

	        var rootElement = xmlDom.documentElement;

	   

          //  var root = DomUtil.loadXmlForString(rootElement.xml);

	    	  $("xmlStr").innerText = rootElement.xml;

	    	  //alert(rootElement.xml);

	    	  display();

	    }

	    

      function display()

      {

          var table = document.createElement("table");

          

	        table.setAttribute("border",1);

	   

	        $("tableXml").appendChild(table);

	        

	        var tHead = table.createTHead();

	            tHead.style.background = "#12c4dd";

	            

	        var headerRow =tHead.insertRow(0); //创建头插入第一行

	        

	        headerRow.insertCell(0).appendChild(document.createTextNode("stuName"));

	        headerRow.insertCell(1).appendChild(document.createTextNode("stuAge"));

	        headerRow.insertCell(2).appendChild(document.createTextNode("stuNo"));

	        

	        var students= xmlDom.getElementsByTagName("student");       //根据标签的名字获得所有的student 

	       // var students = rootElement.childNodes;

	       

          for(var i = 0; i < students.length; i++)

          {

          	var tableRow = table.insertRow(i+1);   //往table里面插入行(Row)

          	

          	var stuAtts = students[i].childNodes;  //获得所有student的子节点	

          	for(var j = 0;j < stuAtts.length; j++)

          	{

          		  var stuAtt = stuAtts[j].childNodes[0].nodeValue;

          		 

          	    tableRow.insertCell(j).appendChild(document.createTextNode(stuAtt));

          	   

          	}

          	var stuNo = students[i].attributes[0].value;  //获得学号

          	

            tableRow.insertCell(stuAtts.length).appendChild(document.createTextNode(stuNo)); 

          }   

      }

...全文

80 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

weizhuo1989 2010-10-29

打赏
举报

luozhangwen 2010-10-29

打赏
举报



      function $(varId)

	    {

	    	return 	document.getElementById(varId);

	    }

	</script>

	

	<body onload="load();">			

			<div id="tableXml"></div>		

			<hr/>

			<div id="xmlStr"></div>

	</body>

</html>





<class> 

    <student stuNo="stu01">

        <stuName>admin</stuName>

        <stuAge> 19 </stuAge>

    </student>

    

    <student stuNo="stu02">

        <stuName>user</stuName>

        <stuAge> 25 </stuAge>

    </student>

</class>