DOM操作XML文档向表格添加数据

答案：<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>DOM操作XML文档</title> 
<script language="javascript"> 
function loadXML()
{ 
       var url = "MyXml.xml"; 
       if(document.implementation&&document.implementation.createDocument)
       { 
              var xmldoc = document.implementation.createDocument("", "", null); 
              xmldoc.onload =   makeTable(xmldoc, url); 
              xmldoc.load(url); 
       } 
       else if(window.ActiveXObject)
       { 
             var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 
              xmldoc.onreadystatechange = function() { 
                     if(xmldoc.readyState == 4) 
                     {
                         makeTable(xmldoc, url);
                     }
              } 
              xmldoc.load(url); 
       } 
} 

function makeTable(xmldoc, url)
{ 
       var table = document.createElement("table"); 
       table.setAttribute("border","1"); 
       table.setAttribute("width","600"); 
       table.setAttribute("style","border:solid 1px #000000;"); 
	   table.setAttribute("id","table1");
       document.body.appendChild(table); 
       var caption = "会员信息数据来自XML文件： " + url; 
       table.createCaption().appendChild(document.createTextNode(caption)); 
       var header = table.createTHead(); 
       var headerrow = header.insertRow(0); 
       headerrow.insertCell(0).appendChild(document.createTextNode("姓名")); 
       headerrow.insertCell(1).appendChild(document.createTextNode("职业")); 
       headerrow.insertCell(2).appendChild(document.createTextNode("工资")); 
       var employees = xmldoc.getElementsByTagName("employee"); 
       for(var i=0;i<employees.length;i++)
       { 
             var e = employees[i]; 
              var name = e.getAttribute("name"); 
              var job = e.getElementsByTagName("job")[0].firstChild.data; 
              var salary = e.getElementsByTagName("salary")[0].firstChild.data; 
              var row = table.insertRow(i+1); 
              row.insertCell(0).appendChild(document.createTextNode(name)); 
              row.insertCell(1).appendChild(document.createTextNode(job)); 
              row.insertCell(2).appendChild(document.createTextNode(salary)); 
       } 
} 
//添加信息
function addRow()
{ 
          var name = document.getElementById("name").value;
          var job = document.getElementById("job").value;
          var salary = document.getElementById("salary").value;
          if((name == "" ) || (job == "") || (salary == ""))
          {
                alert("信息输入不完整，请重新输入！");
                document.getElementById("name").focus();
                return;
          }
	      var table=document.getElementById("table1");
          var row = table.insertRow(1); 
          row.insertCell(0).appendChild(document.createTextNode(name)); 
          row.insertCell(1).appendChild(document.createTextNode(job)); 
          row.insertCell(2).appendChild(document.createTextNode(salary)); 
} 

</script> 
</head> 

<body onLoad="loadXML()"> 

<table style="width:600px; background-color:#99ccff;">
<tbody>
      <tr>
          <td align="center" colspan="4"><b>会员信息管理</b></td>
      </tr>
      <tr>
            <td height="20">增加会员</td>
            <td height="20">
                 姓名：<input id="name" type="text" size="10">
            </td>
            <td height="20">
                 职业：<input id="job" type="text" size="10">
            </td> 
             <td height="20">
                 工资：<input id="salary" type="text" size="10">
            </td>                       
            <td height="20">
                  <input type="button" id="submit1" value="添加" onclick="addRow()"  />
            </td> 
      </tr>
</tbody>
</table>
</body>
</html>
上一个：仿Discuz文本框弹出层的效果
下一个：JavaScript 动态删除/添加HTML表单元素
更多图片编程知识: