【JavaScript】讀取XML
XML內容
<?xml version="1.0" encoding="utf-8" ?>
<People>
<person id="1" dep="行政">
<name>Jason</name>
<mobile>0911222333</mobile>
</person>
<person id="2" dep="財務">
<name>Amy</name>
<mobile>0922456333</mobile>
</person>
<person id="3" dep="資訊">
<name>Alex</name>
<mobile>0945886333</mobile>
</person>
</People>
程式碼
<script type ="text/javascript">
function loadXML(xmlFilePath) //載入XML
{
if(window.ActiveXObject)// code for IE
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFilePath);
}
else if (document.implementation&&document.implementation.createDocument)// code for Mozilla, etc.
{
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFilePath);
}
else
{
alert('您的瀏覽器不支持xml文件讀取,於是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!');
return null;
}
}
//載入 xml
loadXML('xml.xml');
var objRoot = xmlDoc.documentElement
var PeopleObj = objRoot.selectNodes("//People/person");
//*innerHTML 和 write 自帶了語法檢查功能,他會自動把不完整的HTML代碼補充完整 *
var html='<table width ="300" border ="1"><tr><td>編號<td>姓名<td>手機<td>部門';
for (var i=0;i<PeopleObj.length;i++)
{
// xml內容串Table語法
html += "<tr><td>" + PeopleObj[i].getAttribute("id") + "</td>";
html += "<td>" + PeopleObj[i].getElementsByTagName("name")[0].text + "</td>";
html += "<td>" + PeopleObj[i].getElementsByTagName("mobile")[0].text + "</td>";
html += "<td>" + PeopleObj[i].getAttribute("dep") + "</td></tr>";
//找出財務部的人
dep = PeopleObj[i].getAttribute("dep");
if (dep=='財務')
{
var childs =PeopleObj[i].childNodes;
for(var k=0; k<childs.length; k++)
{
var child = childs[k];
switch(child.nodeName)
{
case "name":
document.getElementsByName("fname")[0].value= child.text;
break;
case "mobile":
document.getElementsByName("fmobile")[0].value= child.text;
break;
default:
}
}
}
}
//document.write(html); 這個輸出也行
// XML輸出到 table
document.getElementById("Staff").innerHTML=html;
</script>
部分HTML碼
<body>
<div id="Staff"></div>
<BR />
財務部 <BR />
姓名 : <input type="text" name="fname" size="6">
電話 : <input type="text" name="fmobile" size="10">
</body>
執行畫面
留言
張貼留言