DragonWar% 2015-03-02 22:57 采纳率: 0%
浏览 51

将XML文件解析为表格

This is the XML file that needs to be parsed, we will call it "servers.xml". This file is on the same server I want it parsed (xml file in same folder).

<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>

I need to sort it into a table like so:

|----------------------------------|
| 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 |

I have been working on how todo this for a couple of hours but can't seem to get stuff to display correctly or at all.

Any help is appreciated

EDIT CURRENT CODE: 

<!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>
  • 写回答

1条回答 默认 最新

  • weixin_33698043 2015-03-02 23:37
    关注

    First off, I noticed you had <server> nodes nested inside other <server> nodes. A preferable syntax would be to remove those wrapping nodes, or rename them, to <servers>, for example (that's what I assumed in the following code).

    Edit: Since your xml is already parsed from the Ajax request, you can skip the xmlString, xmlDoc and parsing part.

    You can parse it this way:

    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 Demo

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀