Question

我一直在乱搞一些在线脚本来解析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>

Answer 1

最好在字符串中生成表，然后使用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/以获取示例（我在小提琴中使用了嵌入式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>

Answer 2

<强> jsBin demo

// Just a reusable function. See use below.
function nodeVal(el, tag) {
  return el.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
}

var xmlhttp = window.XMLHttpRequest?
  new XMLHttpRequest():
  new ActiveXObject("Microsoft.XMLHTTP"); /*IE*/

// AJAX is asyncronous, so wait for a response
xmlhttp.onreadystatechange = function () {
  if (this.readyState == 4) { // Good to go!
    var XML,
        TXT = this.responseText; // Get the XML string

    if (window.DOMParser){       // Parse
      XML = new DOMParser().parseFromString(TXT,"text/xml");
    }else {                      // IE
      XML = new ActiveXObject("Microsoft.XMLDOM");
      XML.async = false;
      XML.loadXML(TXT);
    }

    // Get desired elements from XML
    var el  = XML.getElementsByTagName("country");

    // Loop elements and retrieve data
    var html = "<table border='1'>";    // Ok, actually a string :)
    for(var i=0; i<el.length; i++){     // concatenate our string
      html += "<tr><td>"+ nodeVal(el[i], "name") +"</td>"+
                  "<td>"+ nodeVal(el[i],"users") +"</td></tr>";
    }
    html += "</table>";

    // Finally append our html String
    document.body.innerHTML = html;
  }
};

xmlhttp.open("GET", "europe.xml", false);
xmlhttp.send();

也在IE7中测试

让XML以HTML格式显示

2 个答案: