我一直在弄乱一些在线脚本来解析 XML 并将其显示在表格中。不幸的是，与我见过的示例不同，我的示例没有显示表格。
<html>
<head>
</head>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","europe.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.write("<table border='1'>");
var x = xmlDoc.getElementsByTagName("country");
for (i = 0; i < x.length; i++) {
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("users")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
这是 europe.xml
<?xml version="1.0" ?>
<continent name="Europe">
<country>
<name>Albania</name>
<users>1.6 Million</users>
</country>
<country>
<name>Austria</name>
<users>6.7 Million</users>
</country>
<country>
<name>Belgium</name>
<users>8.6 Million</users>
</country>
</continent>
最佳答案
最好以字符串形式生成表格，然后使用 DOM 将生成的 HTML 附加到现有元素。
1) 将容器添加到您要放置表格的 HTML 中:
<html><body>
...
<div id="container"></div>
...
</body></html>
2)加载XML文件:
var client;
if (window.XMLHttpRequest) {
client = new XMLHttpRequest();
}
else {
client = new ActiveXObject("Microsoft.XMLHTTP");
}
client.open('GET', 'europe.xml');
3) 读取文件内容。这应该在 Ajax 回调函数内完成，以确保在处理开始之前读取文件。通常您会测试响应代码等。这是一个示例:
client.onreadystatechange = function() { // will run when the file loads
// get the response XML
var xmlDoc = client.responseXML;
// get the list of countries
var countries = xmlDoc.getElementsByTagName("country");
... // the rest of the code (see below)
}
client.send(); // this will send the request which will be captured by the function above
4) 获取 <country> 的列表元素(在上面的代码中):
var countries = xmlDoc.getElementsByTagName("country");
5) 获取容器 div表格将添加到的位置:
var container = document.getElementById("container");
6) 在字符串中创建一个 HTML 表并将元素数据放入其中:
var tableString = "<table border='1'>"; // Make a table and put the element data inside it
for (i = 0; i < countries.length; i++) {
tableString += "<tr><td>";
tableString += countries[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
tableString +="</td><td>";
tableString += countries[i].getElementsByTagName("users")[0].childNodes[0].nodeValue;
tableString += "</td></tr>";
}
tableString += "</table>";
7)将表附加到容器:
container.innerHTML = tableString;
此示例使用纯 JavaScript。您可能还想尝试使用 JQuery 的解决方案这可能会将上面的代码行数减少到大约一半。
参见http://jsfiddle.net/helderdarocha/N2nER/举个例子(我在 fiddle 中使用了嵌入式 XML 而不是 Ajax，以避免加载外部文件)
更新:这是整个 HTML 页面，以防您在组装各个部分时遇到问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
var client;
if (window.XMLHttpRequest) {
client = new XMLHttpRequest();
}
else {
client = new ActiveXObject("Microsoft.XMLHTTP");
}
client.open('GET', 'europe.xml');
client.onreadystatechange = function() { // will run when the file loads
// get the response XML
var xmlDoc = client.responseXML;
// get the list of countries
var countries = xmlDoc.getElementsByTagName("country");
// get the container where you want to embed the table
var container = document.getElementById("container");
var tableString = "<table border='1'>"; // Make a table and put the element data inside it
for (i = 0; i < countries.length; i++) {
tableString += "<tr><td>";
tableString += countries[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
tableString +="</td><td>";
tableString += countries[i].getElementsByTagName("users")[0].childNodes[0].nodeValue;
tableString += "</td></tr>";
}
tableString += "</table>";
// append the table to the container
container.innerHTML = tableString;
}
client.send();
</script>
</head>
<body>
<h1></h1>
<div id="container"></div>
</body>
</html>
关于javascript - 让 XML 以 HTML 形式显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24297416/