如何将XML数据包装在HTML表中？
[英]how to wrap the XML data in table of a HTML?
问题描述
我有一个HTML模板，我需要里面显示第一个表与标签XML。 我尝试了table-layout:fixed;word-wrap:break-word;width:100%为表标记，但它被划分表同样和文本中第如示于下面的图像没有来新行。
sample.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 个解决方案
解决方案1
1 2018-08-28 10:22:20
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="navn">Artist</th><th class="priskr">Title</th><th class="pris">Year</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i < x.length; i++) { table += "<tr><td class="navn">" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td class="priskr">" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td><td class="pris">" + 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>
如何使用 XML 数据动态填充 HTML 表？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.