读取XML，解析生成表格

lbyzx123 · 发表于 2013-1-29 07:49:14

js代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>读取XML，解析生成表格</title>
<script language="javascript">

function delrow(i){
//删除第i行
if(confirm("确定要该记录吗？")){
  var row = document.getElementById("row"+i);
  var tbl = row.parentNode;
  tbl.removeChild(row);
}
}
function loadXML(handler) {
var url = "students.xml";
if(document.implementation&&document.implementation.createDocument) {
  var xmldoc = document.implementation.createDocument("", "", null);
  xmldoc.onload = handler(xmldoc, url);
  xmldoc.load(url);
}
else if(window.ActiveXObject) {
  var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
  xmldoc.onreadystatechange = function() {
   if(xmldoc.readyState == 4) handler(xmldoc, url);
  }
  xmldoc.load(url);
}
}
function makeTable(xmldoc, url) {
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","600");
table.setAttribute("class","studList");
var studListDiv = document.getElementById("studentList");
studListDiv.appendChild(table);
var caption = "Student Data from " + 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("性别"));
headerrow.insertCell(3).appendChild(document.createTextNode("操作"));
var student = xmldoc.getElementsByTagName("student");
for(var i=0;i<student.length;i++) {
  var s = student[i];
  var name = s.getAttribute("name");
  var stuNo = s.getElementsByTagName("studentID")[0].firstChild.data;
  var sex = s.getElementsByTagName("sex")[0].firstChild.data;
  if (sex=="1")
   sex="男";
  else
   sex="女";
  var row = table.insertRow(i+1);
  row.setAttribute("id","row"+i);
  row.insertCell(0).appendChild(document.createTextNode(name));
  row.insertCell(1).appendChild(document.createTextNode(stuNo));
  row.insertCell(2).appendChild(document.createTextNode(sex));
  var del = row.insertCell(3).appendChild(document.createElement("a"));
  del.setAttribute("href","javascript:delrow("+i+")");
  del.innerHTML = "删除";
}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div id="studentList"></div>
</body>
</html>

xml文件如下：
<?xml version="1.0"?>
<students>
      <student name="曹智">
      <studentID>1211102 </studentID>
      <sex>1</sex>
      </student>

      <student name="孙豪">
      <studentID>01212305</studentID>
      <sex>1</sex>
      </student>

      <student name="陈建林">
      <studentID>02211101</studentID>
      <sex>1</sex>
      </student>

      <student name="林晟思">
      <studentID>02211102</studentID>
      <sex>1</sex>
      </student>

      <student name="廖翠华">
      <studentID>02211103</studentID>
      <sex>0</sex>
      </student>

      <student name="何利欢">
      <studentID>02211104</studentID>
      <sex>0</sex>
      </student>

      <student name="徐文君">
      <studentID>02211105</studentID>
      <sex>0</sex>
      </student>

      <student name="甘四喜">
      <studentID>02211106</studentID>
      <sex>1</sex>
      </student>

      <student name="尤安康">
      <studentID>02211107</studentID>
      <sex>1</sex>
      </student>

      <student name="王俊凯">
      <studentID>02211108</studentID>
      <sex>1</sex>
      </student>

      <student name="王金龙">
      <studentID>02211109</studentID>
      <sex>1</sex>
      </student>

      <student name="董萌">
      <studentID>02211110</studentID>
      <sex>1</sex>
      </student>

      <student name="姚茂">
      <studentID>02211111</studentID>
      <sex>0</sex>
      </student>

      <student name="梁亮">
      <studentID>02211112</studentID>
      <sex>1</sex>
      </student>

      <student name="蔡丹青">
      <studentID>02211113</studentID>
      <sex>0</sex>
      </student>

      <student name="周玲琍">
      <studentID>02211114</studentID>
      <sex>0</sex>
      </student>

      <student name="陈小勇">
      <studentID>02211115</studentID>
      <sex>1</sex>
      </student>

      <student name="阮瑛">
      <studentID>02211116</studentID>
      <sex>1</sex>
      </student>

      <student name="顾杰">
      <studentID>02211117</studentID>
      <sex>1</sex>
      </student>

      <student name="钱颀峰">
      <studentID>02211118</studentID>
      <sex>1</sex>
      </student>

      <student name="龚剑虹">
      <studentID>02211119</studentID>
      <sex>0</sex>
      </student>

      <student name="岑丰其">
      <studentID>02211120</studentID>
      <sex>1</sex>
      </student>

      <student name="叶丹">
      <studentID>02211121</studentID>
      <sex>0</sex>
      </student>

      <student name="卢童鑫">
      <studentID>02211122</studentID>
      <sex>1</sex>
      </student>

      <student name="黄小锋">
      <studentID>02211123</studentID>
      <sex>1</sex>
      </student>

      <student name="蓝飞燕">
      <studentID>02211124</studentID>
      <sex>0</sex>
      </student>

      <student name="郑坚">
      <studentID>02211125</studentID>
      <sex>0</sex>
      </student>

      <student name="胡军">
      <studentID>02211126</studentID>
      <sex>1</sex>
      </student>

      <student name="郑瑶">
      <studentID>02211127</studentID>
      <sex>0</sex>
      </student>

      <student name="尹科峰">
      <studentID>02211128</studentID>
      <sex>1</sex>
      </student>

      <student name="祁竹坚">
      <studentID>02211129</studentID>
      <sex>1</sex>
      </student>

      <student name="杨玲君">
      <studentID>02211130</studentID>
      <sex>0</sex>
      </student>

      <student name="缪文伟">
      <studentID>02211131</studentID>
      <sex>1</sex>
      </student>

      <student name="卢琦蓓">
      <studentID>02211132</studentID>
      <sex>0</sex>
      </student>

      <student name="周凤玲">
      <studentID>02211133</studentID>
      <sex>0</sex>
      </student>

      <student name="李海顺">
      <studentID>02211134</studentID>
      <sex>1</sex>
      </student>

      <student name="陈森">
      <studentID>02211135</studentID>
      <sex>1</sex>
      </student>

      <student name="金路燕">
      <studentID>02211136</studentID>
      <sex>0</sex>
      </student>

      <student name="冯迪佳">
      <studentID>02211301</studentID>
      <sex>0</sex>
      </student>

      <student name="施希乐">
      <studentID>02211302</studentID>
      <sex>0</sex>
      </student>

      <student name="王莹">
      <studentID>02211303</studentID>
      <sex>0</sex>
      </student>

      <student name="王怡">
      <studentID>02211304</studentID>
      <sex>0</sex>
      </student>

      <student name="费菲">
      <studentID>02211305</studentID>
      <sex>0</sex>
      </student>

      <student name="叶彦佚">
      <studentID>02211306</studentID>
      <sex>0</sex>
      </student>

      <student name="江东梅">
      <studentID>02211307</studentID>
      <sex>0</sex>
      </student>

      <student name="黄瑶涵">
      <studentID>02213134</studentID>
      <sex>0</sex>
      </student>

      <student name="王芳">
      <studentID>02213212</studentID>
      <sex>0</sex>
      </student>

</students>

		自动登录	找回密码
密码			立即注册