我正在嘗試將XML檔案作為表格寫入id為“div1”的div內的HTML頁面上，但我無法讓表格出現在頁面上-有解無憂

因此，我試圖將 XML 檔案作為表格寫入 id 為“div1”的 div 內的 HTML 頁面上，但我無法讓表格出現在頁面上，我被卡住了。它不一定必須在 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>");

uj5u.com熱心網友回復：

您可能正在尋找一種從 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/498081.html

標籤：javascript html xml

上一篇：我正在嘗試解決來自jshero.net的挑戰

下一篇：有沒有辦法將日期用作陣列