我正在尝试将 XML 文件作为 ID 为 "div1" div 内的 HTML 页面上的表格编写,但我无法让表格出现在页面上



所以我试图写一个XML文件作为一个表格在一个HTML页面内的div与id "div1"但我无法让表格出现在页面上。它不一定要在div中,但它必须出现在页面上的HTML表。我是新的javascript和努力寻找一个解决方案,但有很少类似的例子在网上,所以我希望有人可以帮助…XML表应该像这样

这是HTML页面....

<!DOCTYPE html>
<html>
<head>
<title>kol2</title>
</head>
<body>
<div id="div1"></div>    
<script src="kol2.js"></script>
</body>


</html>

这是XML文件…

<?xml version="1.0"?>
<nekretnine xmlns:h="http://www.nekretnine.hr">
<h:nekretnina>
<h:ID>1211</h:ID>
<h:Adresa>Vukovarska 121</h:Adresa>
<h:Grad>Zagreb</h:Grad>
<h:Tip>Stan</h:Tip>
</h:nekretnina>
<h:nekretnina>
<h:ID>2123</h:ID>
<h:Adresa>Horvatova 13</h:Adresa>
<h:Grad>Biograd</h:Grad>
<h:Tip>Kuća</h:Tip>
</h:nekretnina>
</nekretnine>

这是我到目前为止的javascript代码…

if (window.XMLHttpRequest)  
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","nekretnine.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("nekretnina");
for (i=0;i<x.length;i++)
{

document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("Adresa")[0].childNodes[0].nodeValue);document.write("</td><td>");
document.write(x[i].getElementsByTagName("Grad")[0].childNodes[0].nodeValue);document.write("</td><td>");
document.write(x[i].getElementsByTagName("Tip")[0].childNodes[0].nodeValue); document.write("</td></tr>");
}
document.write("</table>");

您可能正在寻找一种从xml动态创建表的方法-类似于以下内容(我将内联解释):

xml = `<?xml version="1.0"?>
<nekretnine xmlns:h="http://www.nekretnine.hr">
<h:nekretnina>
<h:ID>1211</h:ID>
<h:Adresa>Vukovarska 121</h:Adresa>
<h:Grad>Zagreb</h:Grad>
<h:Tip>Stan</h:Tip>
</h:nekretnina>
<h:nekretnina>
<h:ID>2123</h:ID>
<h:Adresa>Horvatova 13</h:Adresa>
<h:Grad>Biograd</h:Grad>
<h:Tip>Kuća</h:Tip>
</h:nekretnina>
</nekretnine>
`;
//since you're parsing xml, we'll use xpath to search it; first create
//a helper function for that:
const docEval = (doc, expr, context) =>
doc.evaluate(expr, context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,  null
);
//parse the xml string
domdoc = new DOMParser().parseFromString(xml, "text/xml");
//locate the place in the html table where the result will be inserted
dest = document.querySelector("#theTable");
//locate the data
neks = docEval(domdoc, './/*[local-name()="nekretnina"]', domdoc);
for (let i = 0; i < neks.snapshotLength; i++) {
//open the table row
row = `<tr>`;
let nek = neks.snapshotItem(i);
entries = docEval(domdoc, ".//*", nek);
for (let i = 0; i < entries.snapshotLength; i++) {
let entry = entries.snapshotItem(i);
info = docEval(domdoc, ".//text()", entry);
//add the data to the row
row += `<td>${info.snapshotItem(0).nodeValue}</td>`;
}
//close the row
row += `</tr>`;
//insert the row in the destination
dest.insertAdjacentHTML("beforeend", row);
}
<table id='theTable' border='1'><tr><td>ID</td><td>Adres</td><td>Grad</td><td>Tip</td></tr></table>

<?xml version="1.0"?>
<nekretnine xmlns:h="http://www.nekretnine.hr">
<h:nekretnina>
<h:ID>1211</h:ID>
<h:Adresa>Vukovarska 121</h:Adresa>
<h:Grad>Zagreb</h:Grad>
<h:Tip>Stan</h:Tip>
</h:nekretnina>
<h:nekretnina>
<h:ID>2123</h:ID>
<h:Adresa>Horvatova 13</h:Adresa>
<h:Grad>Biograd</h:Grad>
<h:Tip>Kuća</h:Tip>
</h:nekretnina>
</nekretnine>

if (window.XMLHttpRequest)  
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","nekretnine.xml","false");
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("h:nekretnina");
document.write("<tr><th>ID</<th><th>Adresa</th><th>Grad</th><Tip</th></tr");
for (i=0;i<x.length;i++)
{

document.write("<tr><td>");
document.write(x[i].getElementsByTagName("h:ID")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("h:Adresa")[0].childNodes[0].nodeValue);document.write("</td><td>");
document.write(x[i].getElementsByTagName("h:Grad")[0].childNodes[0].nodeValue);document.write("</td><td>");
document.write(x[i].getElementsByTagName("h:Tip")[0].childNodes[0].nodeValue); document.write("</td></tr>");
}
document.write("</table>");

最新更新