将XML文件解析为表
Parse XML file into a table
这是需要解析的XML文件,我们将其称为"servers.XML"。这个文件在我想要解析的同一台服务器上(xml文件在同一个文件夹中)。
<root>
<list>
<server>
<server name="28 Disconnects Later">
<timestamp name="2015-02-25 14:28:56">low</timestamp>
<timestamp name="2015-02-25 14:58:56">low</timestamp>
<timestamp name="2015-02-25 15:28:57">low</timestamp>
<timestamp name="2015-02-25 15:58:58">low</timestamp>
<timestamp name="2015-02-25 16:28:59">low</timestamp>
<timestamp name="2015-02-25 16:59:00">low</timestamp>
<timestamp name="2015-02-25 17:29:01">low</timestamp>
<timestamp name="2015-02-25 17:59:02">low</timestamp>
<timestamp name="2015-02-25 18:29:04">low</timestamp>
<timestamp name="2015-02-25 18:59:05">low</timestamp>
</server>
<server name="Abomination">
<timestamp name="2015-02-25 14:28:56">high</timestamp>
<timestamp name="2015-02-25 14:58:56">high</timestamp>
<timestamp name="2015-02-25 15:28:57">high</timestamp>
<timestamp name="2015-02-25 15:58:58">high</timestamp>
<timestamp name="2015-02-25 16:28:59">high</timestamp>
<timestamp name="2015-02-25 16:59:00">high</timestamp>
<timestamp name="2015-02-25 17:29:01">high</timestamp>
<timestamp name="2015-02-25 17:59:02">high</timestamp>
<timestamp name="2015-02-25 18:29:04">high</timestamp>
<timestamp name="2015-02-25 18:59:05">high</timestamp>
</server>
</server>
</list>
</root>
我需要把它整理成这样的表格:
|----------------------------------|
| server name |
|----------------------------------|
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
|----------------------------------|
| |
|----------------------------------|
| server name |
|----------------------------------|
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
几个小时以来,我一直在研究如何做到这一点,但似乎无法正确显示或根本无法显示内容。
感谢提供的任何帮助
编辑当前代码:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","AOD-H1Z1.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table><tr><th colspan='2'>Server</th></tr>");
var x=xmlDoc.getElementsByTagName("server");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("timestamp")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("timestamp")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
首先,我注意到<server>
节点嵌套在其他<server>
节点中。优选的语法是删除这些包装节点,或将其重命名为<server
s>
,例如(这是我在下面的代码中假设的)。
编辑:由于已经从Ajax请求解析了xml,因此可以跳过xmlString, xmlDoc
和解析部分。
你可以这样解析:
var xmlString = '<root><list><server><server name="28 Disconnects Later"><timestamp name="2015-02-25 14:28:56">low</timestamp><timestamp name="2015-02-25 14:58:56">low</timestamp><timestamp name="2015-02-25 15:28:57">low</timestamp><timestamp name="2015-02-25 15:58:58">low</timestamp><timestamp name="2015-02-25 16:28:59">low</timestamp><timestamp name="2015-02-25 16:59:00">low</timestamp><timestamp name="2015-02-25 17:29:01">low</timestamp><timestamp name="2015-02-25 17:59:02">low</timestamp><timestamp name="2015-02-25 18:29:04">low</timestamp><timestamp name="2015-02-25 18:59:05">low</timestamp></server><server name="Abomination"><timestamp name="2015-02-25 14:28:56">high</timestamp><timestamp name="2015-02-25 14:58:56">high</timestamp><timestamp name="2015-02-25 15:28:57">high</timestamp><timestamp name="2015-02-25 15:58:58">high</timestamp><timestamp name="2015-02-25 16:28:59">high</timestamp><timestamp name="2015-02-25 16:59:00">high</timestamp><timestamp name="2015-02-25 17:29:01">high</timestamp><timestamp name="2015-02-25 17:59:02">high</timestamp><timestamp name="2015-02-25 18:29:04">high</timestamp><timestamp name="2015-02-25 18:59:05">high</timestamp></server></server></list></root>',
xmlDoc,
// Create your table element
table = document.createElement('table');
// Parse the xml
if (window.DOMParser){ // Standard browsers
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlString, "text/xml");
}
else { // Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xmlString);
}
var servers = xmlDoc.getElementsByTagName('list')[0].childNodes[0]
.getElementsByTagName('server');
// for each server
for(var i=0, l=servers.length; i<l; i++){
var server = servers[i];
// Insert a row
var tr = table.insertRow();
// Insert a cell
var td = tr.insertCell();
// Make it spread over 2 columns
td.colSpan = '2';
// Insert the server name
td.innerHTML = server.getAttribute('name');
var timestamps = server.getElementsByTagName('timestamp');
// For each timestamp
for(var j=0, k=timestamps.length; j<k; j++){
var timestamp = timestamps[j];
// Insert a row
tr = table.insertRow();
// Insert a cell
td = tr.insertCell();
// Insert the timestamp name
td.innerHTML = timestamp.getAttribute('name');
// Insert a cell
td = tr.insertCell();
// Insert the timestamp value
td.innerHTML = timestamp.innerHTML;
}
}
// Append it to the body?
document.body.appendChild(table);
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
margin: 1em auto;
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
td {
padding: .5em .8em;
border: 1px solid #000;
text-align: center;
}
td[colspan='2'] {
background: #333;
color: #fff;
}
JS Fiddle演示
相关文章:
- 我应该如何从xml文件构建一个javascript页面
- 如何使用javascript或jquery mobile从url读取和显示XML文件
- 如何使用JQUERY解析大型XML文件并将其可视化为HTML格式
- Javascript/JQuery.本地缓存xml文件
- xml文件在js项目目录结构中的位置
- 使用jquery动态解析XML文件
- 指定单击链接时要加载的xml文件
- 使用javascript读取本地XML文件并在html页面中显示
- 将xml文件导入pdf(Acrobat)
- 使用AJAX传递的数据编辑XML文件-正在删除XML数据
- 在HTML文档中使用XML文件中的数据
- 可以't从xml文件中提取数据
- 通过JS/AAJAX在XML文件中搜索1个数据
- 搜索XML文件并使用javascript显示结果
- Windows 8市场应用程序JS,访问远程XML文件
- 将Xml文件链接到HTML
- 如何将 XML 文件包含在摩卡测试用例中
- 无法在 jsTree 中通过 HTTP 加载 XML 文件
- 在 XML 文件中搜索 TestComplete 中的特定属性值
- 如何使用Iron Router在Meteor中生成XML文件