代码之家 › 专栏 › 技术社区 › Snkini

如何将xml数据包装成html表格?

web css html javascript

Snkini · 技术社区 · 6 年前

我有一个html模板,需要在其中显示带有标记的xml 第一张桌子。我试过了 table-layout:fixed;word-wrap:break-word;width:100% 对于table tag,但它将表平分为第没有出现下图所示的新行。

示例.html

<html>
 <body>
  <style>
   .queryTable {
    table-layout:fixed;
    width:100%;
    word-wrap:break-word;
   }
   th, .markHead{
    background-color:#124191;
    color:white;
   }
  </style>
 <h2>Sample Table </h2>
 <table border="1" class="queryTable">
  <thead>
   <tr>
   <th class="six wide">Table Name</th>
   <th class="six wide">Response Time (in sec.)</th></tr>
  </thead>
  <tbody>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>33.33</td>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>22.33</td>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>32.72</td>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>34.30</td>
   </tr>
  </tbody>
 </table>
 </body>    
</html>

1 回复 | 直到 6 年前

Simon Jensen 6 年前

W3schools已经提供了相当不错的教程。

https://www.w3schools.com/xml/xml_examples.asp

见 https://www.w3schools.com/xml/cd_catalog.xml 以及相应的xml文件 https://www.w3schools.com/xml/cd_catalog.xml

我创造了这个 ~~Fiddle~~ 下面是片段。一个问题是链接的XML文件没有任何相关联的键,并且无法读取—但是脚本、HTML和CSS的工作方式就像一个符咒。

通过为每个td分配一个类(请参见下面脚本中的说明),您就可以为每个单元格提供完全控制。下面我使用了固定宽度,但你可以使用百分比。如果您不知道XML文件的结果,我会说您只使用百分比。

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "https://www.w3schools.com/xml/cd_catalog.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "<tr><th class=&#34;navn&#34;>Artist</th><th class=&#34;priskr&#34;>Title</th><th class=&#34;pris&#34;>Year</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td class=&#34;navn&#34;>" +
      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
      "</td><td class=&#34;priskr&#34;>" +
      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
      "</td><td class=&#34;pris&#34;>" +
      x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
      "</td></tr>";
  }
  document.getElementById("YourTableID").innerHTML = table;
}

table.betingelser {
  border: 1px solid #2E181A;
  border-collapse: collapse;
  margin: 5px auto;
  table-layout: fixed;
  width: 450px;
}

.betingelser th.navn {
  border: 1px solid #2E181A;
  border-left: none;
  border-right: none;
  width: 230px;
  text-align: center;
}

.betingelser td.navn {
  border: 1px solid #2E181A;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 230px;
  padding: 0px 5px;
  text-align: left;
}

.betingelser th.pris {
  border: 1px solid #2E181A;
  border-left: none;
  border-right: none;
  width: 120px;
  text-align: left;
}

.betingelser th.priskr {
  border: 1px solid #2E181A;
  border-left: none;
  border-right: none;
  width: 150px;
  text-align: left;
}

.betingelser td.pris {
  border: 1px solid #2E181A;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 120px;
  padding: 0px 5px;
  text-align: center;
}

.betingelser td.priskr {
  border: 1px solid #2E181A;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 150px;
  padding: 0px 5px;
  text-align: center;
}

.betingelser tr:nth-child(even) {
  background-color: #c7aa6b;
}

<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>

<table class="betingelser" id="YourTableID"></table>