使用 javascript 在 HTML 中显示 XML 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20944156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using javascript to display XML data in HTML
提问by user3128861
Hi currently I have the following XML file and my script.
嗨，目前我有以下 XML 文件和我的脚本。
<ResourcesList>
<ResourceGroup type = "HUMANS">
<ResourcesInfo JobPosition = "Station Manager" OnDuty = "40" OnLeave_Local = "1" OnLeave_Oversea = "1" MC = "2" />
<ResourcesInfo JobPosition = "Deputy Station Manager" OnDuty = "82" OnLeave_Local = "5" OnLeave_Oversea = "5" MC = "2" />
</ResourceGroup>
<ResourceGroup type = "MACHINES">
<ResourcesInfo MachineName = "Leopard 2SG" MachineID = "SB1420J" MachineType = "Battle Tank" Available = "15" NotAvailable = "2" />
<ResourcesInfo MachineName = "M113A2 ULTRA OWS" MachineID = "SS4020J" MachineType = "Transport Vechicle" Available = "50" NotAvailable = "21" />
</ResourceGroup>
</ResourcesList>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","ResourceList.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("ResourceGroup");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0].nodeValue);
}
document.write("</table>");
</script>
Anybody can help?? I followed the example in w3school and tried writing it out but it tells me the following error.
有人可以帮忙吗？？我遵循 w3school 中的示例并尝试将其写出来，但它告诉我以下错误。
TypeError:x[i].getElementsByTagName(ResourcesInfo)[0].childNodes[0] is undefined.
类型错误：x[i].getElementsByTagName(ResourcesInfo)[0].childNodes[0] is undefined.
回答by Vikram Deshmukh
HereI've fixed the parsing logic for you.
在这里，我已经为您修复了解析逻辑。
And, here's where magic happens:
而且，这就是魔法发生的地方：
document.write("<table border='1'>");
var x = xmlDoc.getElementsByTagName("ResourceGroup");
for (i = 0; i < x.length; i++) {
document.write("<tr>");
var y = x[i].getElementsByTagName("ResourcesInfo");
for (j = 0; j < y.length; j++) {
if (x[i].getAttribute("type") == "HUMANS") {
document.write("<td>" + y[j].getAttribute('JobPosition') + "</td>");
} else {
document.write("<td>" +y[j].getAttribute('MachineName') + "</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
}
Fiddle with the code to parse and create the desired HTML table structure.
修改代码以解析和创建所需的 HTML 表结构。
回答by Siva Tumma
I am getting the values... (undefined though, as they don't have any text inside).
我正在获取值...（虽然未定义，因为它们里面没有任何文本）。
Check any spelling mistakes. And I have modified
document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0].nodeValue);to
检查任何拼写错误。我已经修改
document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0].nodeValue);为
document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0]);.
document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0]);.
BTW What is your expected output ? Here is a screenshot of mine...
顺便说一句，您的预期输出是多少？这是我的截图...
