Question

我有这个JavaScript html代码用于获取表格格式输出。我将XML数据作为脚本的输入。

function myFunction() {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(
  "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
  +"<book>"+
  "<title>The Time Machine and Other Stories</title>"+
  "<author_name>H. G. Wells</author_name>"+
  "<publish_date>2016</publish_date>"+
  "<cost currency=\"USD\">10</cost>"+
  "<publisher_info>"+ 
  "<publisher_name>Read Books Ltd</publisher_name>"+
  "<publisher_address>"+
  "<street_name>Evesham street</street_name>"+
  "<city>Worcestershire</city>"+
  "<zip_code>11WR</zip_code>"+
  "<country>United Kingdom</country>"+
  "</publisher_address>"+
  "</publisher_info>"+
  "</book>","text/xml");

  var x=xmlDoc.getElementsByTagName("publisher_address");
  
  for (i=0;i<x.length;i++) { 
    document.write("<tr>");
    var y=x[i].childNodes;
    for (j=0;j<y.length;j++) {
      document.write("<td>"+ y[j].childNodes[0].nodeValue+ "</td>");
    }
    document.write("</tr>");
  }
}

table, th, td {
  border: 1px solid black;
}

<h1>My First XML Parsing JavaScript</h1>
<p>Click the button to display book info.</p>
<p id="demo"></p>
<button type="button" onclick="myFunction()">Try it</button>
<table border="0">
</table>

我得到的输出是：

Evesham streetWorcestershire11WRUnited Kingdom

任何人都可以帮助我，为什么我无法以表格格式获得输出？

Answer 1

您使用的document.write()未提供预期的输出。

使用createElement创建表格，通过创建行填充数据，然后添加到您的dom或段落中。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <h1>My First XML Parsing JavaScript</h1>
  <p>Click the button to display book info.</p>
  <p id="demo"></p>

  <button type="button" onclick="myFunction()">Try it</button>
  <table border="0">
    <script>
      function myFunction() {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(
          "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
          "<book>" +
          "<title>The Time Machine and Other Stories</title>" +
          "<author_name>H. G. Wells</author_name>" +
          "<publish_date>2016</publish_date>" +
          "<cost currency=\"USD\">10</cost>" +
          "<publisher_info>" +
          "<publisher_name>Read Books Ltd</publisher_name>" +
          "<publisher_address>" +
          "<street_name>Evesham street</street_name>" +
          "<city>Worcestershire</city>" +
          "<zip_code>11WR</zip_code>" +
          "<country>United Kingdom</country>" +
          "</publisher_address>" +
          "</publisher_info>" +
          "</book>", "text/xml");
          
         // creating a table 
         table = document.createElement('table');

        var x = xmlDoc.getElementsByTagName("publisher_address");
        for (i = 0; i < x.length; i++) {
          
          // create a row
          var tr = table.insertRow();
    
          var y = x[i].childNodes;
          for (j = 0; j < y.length; j++) {

           // crate a cell for your data
           var td = tr.insertCell();
           
           // put the data into your td
           td.innerHTML = y[j].childNodes[0].nodeValue;

          }
        }
        // append it to body, or to your p#demo
        document.body.appendChild(table);

      }
    </script>
  </table>
</body>

</html>

＆＃13;

Answer 2

您需要为您的表提供一个容器，其中包含要挂钩的ID：

<table>
    <tbody id="my-table-contents"></tbody>
</table>

然后在您的javascript中，您可以附加到该容器。

<script>
  var myTable = document.getElementById('my-table-contents');

  function myFunction() {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(
      "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
      "<book>" +
      "<title>The Time Machine and Other Stories</title>" +
      "<author_name>H. G. Wells</author_name>" +
      "<publish_date>2016</publish_date>" +
      "<cost currency=\"USD\">10</cost>" +
      "<publisher_info>" +
      "<publisher_name>Read Books Ltd</publisher_name>" +
      "<publisher_address>" +
      "<street_name>Evesham street</street_name>" +
      "<city>Worcestershire</city>" +
      "<zip_code>11WR</zip_code>" +
      "<country>United Kingdom</country>" +
      "</publisher_address>" +
      "</publisher_info>" +
      "</book>", "text/xml");

    var x = xmlDoc.getElementsByTagName("publisher_address");
    for (i = 0; i < x.length; i++) {
      myTable.innerHtml += "<tr>";
      var y = x[i].childNodes;
      for (j = 0; j < y.length; j++) {

        myTable.innerHtml += "<td>" + y[j].childNodes[0].nodeValue + "</td>";

      }
      myTable.innerHtml += "</tr>";
    }

  }
</script>

javascript表格格式输出

2 个答案: