解析xml并创建html表纯javascript（使用数据块）答案

【问题标题】：parse xml and create html table pure javascript (using data block)解析xml并创建html表纯javascript（使用数据块）
【发布时间】：2015-08-19 05:59:29
【问题描述】：

有人能发现我的代码的问题吗？我想将我的 xml 数据解析为 html 表，但它不起作用。没有创建表。

我的 xml 文件名为 purchase

<?xml version="1.0">
<purchaseOrder xmlns="assoc">
  <lineItem>
    <name>Line Item 1</name>
    <price>1.25</price>
  </lineItem>
  <lineItem>
    <name>Line Item 2</name>
    <price>2.48</price>
  </lineItem>
</purchaseOrder>

还有我的代码：

<!DOCTYPE html>
<html>
<head>
<title>XML Data Block Demo</title>
<script>
function runDemo() {
  var doc = document.getElementById("purchase-order").contentDocument;
  var lineItems = doc.getElementsByTagNameNS("assoc", "lineItem");
  var firstPrice = lineItems[0].getElementsByTagNameNS("assoc", "price")[0].textContent;

  var HTML = "<table><tr><th>lineItems</th><th>firstprice</th></tr>";
  var x=doc.getElementsByTagName("lineItem");
for(i=1;i<=;i++)
{
    HTML += "<tr><td>"+x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue+"</td><td>"+x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue+"</td></tr>";
}
HTML += "</table>";
document.getElementById("output").innerHTML = HTML;


 }
</script>
</head>
<body onload="runDemo()";>
<object id="purchase-order" data="purchase.xml" type="text/xml"  style="display: none;"></object>
<div id="output">My table did not run</div>
</body>
</html>

我使用数据块对象方法将xml解析为html，请参见此处的链接，我上面的方法已用于获取xml数据data island alternative

有人知道我的代码有什么问题吗？

干杯

【问题讨论】：

标签： javascript html xml dom innerhtml

【解决方案1】：

你的循环看起来很奇怪：

for(i=1;i<=;i++)

为什么从 1 开始？并且没有限制。应该是这样的

for(i=0;i<=x.length;i++)

此外，没有使用 firstPrice...

【讨论】：

【解决方案2】：

这些是您遇到的问题：

xml 声明应该是：

<?xml version="1.0" ?>
您应该将对象标签的内联样式设置为：

style="visibility: hidden"
您的代码必须在服务器上运行以避免跨域策略。为此，您可以使用“http-server”或您选择的服务器。
“runDemo”函数的工作版本应如下所示：

function runDemo() {
	var doc = document.getElementById("purchase-order").contentDocument;
	var lineItems = doc.getElementsByTagName("lineItem");
	var html = "<table><tr><th>lineItems</th><th>firstprice</th></tr>";
	
	for (i = 0; i < lineItems.length; i++) {
		html += "<tr><td>" 
		+ lineItems[i].getElementsByTagName("name")[0].childNodes[0].nodeValue 
		+ "</td><td>" 
		+ lineItems[i].getElementsByTagName("price")[0].childNodes[0].nodeValue 
		+ "</td></tr>";
	}
	html += "</table>";
	
	document.getElementById("output").innerHTML = html;
}

【讨论】：

谢谢。我不想在服务器上运行它，如果您查看我提供的链接，代码可以正常工作，而无需通过服务器使用它。我自己试过了....
该代码实际上与“代码块”一起工作正常，但在与外部 xml 文件一起使用时会产生有关跨域的错误。