Question

我有一个XML文件，想要从XML文件创建动态html表。在XML文件中是“body”中每个节点的“标题”。

“header”中的节点文本必须是第一列作为ROW Description，而“body”中的值必须是第二列。黄金目标是在第三列放入一个CSS类，图像取决于值，我想我必须在这里为每个值写一个函数才能做到这一点吗？

我有一个Jquery代码，为每个Node（正文，标题）获取值，如何将它们放在一起以获取示例表输出？我绝对是Jscripting的新手。

示例输出表：

   <table class="table">
        <tr>
            <td width="33%" valign="top">Label</td>
            <td width="33%" valign="top">Value</td>
            <td width="33%" valign="top">Image</td>
        </tr>
        <tr>
            <td width="33%" valign="top">Name</td>
            <td width="33%" valign="top">C0</td>
            <td width="33%" valign="top"><img src=""></td>
        </tr>
        <tr>
            <td width="33%" valign="top">Computer Type</td>
            <td width="33%" valign="top">C1</td>
            <td width="33%" valign="top"><img src=""></td>
        </tr>
    </table>

XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<systems name="client" xmlns="http://..." xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<header>
    <c0>
        <name>Name</name>
    </c0>
    <c1>
        <name>Computer type</name>
    </c1>
    <c2>
        <name>Number of CPUs</name>
    </c2>
    <c3>
        <name>Total RAM</name>
    </c3>
    <c4>
        <name>Hard disks</name>
    </c4>
    <c5>
        <name>Logical drives</name>
    </c5>
    <c6>
        <name>System drive free space</name>
    </c6>
    <c7>
        <name>System drive usage</name>
    </c7>
</header>
<body>
    <r>
        <c0>PC0001</c0>
        <c1>desktop</c1>
        <c2>1</c2>
        <c3>8589934592</c3>
        <c4>
            <disk>
                <manufacturer>Western Digital</manufacturer>
                <name>WDC WD5000AAKX-083CA0</name>
                <size>500105249280</size>
            </disk>
        </c4>
        <c5>
            <drive>
                <name>C</name>
                <sys>true</sys>
                <size>400000282624</size>
                <free>345680142336</free>
            </drive>
            <drive>
                <name>D</name>
                <sys>false</sys>
                <size>100000591872</size>
                <free>99903418368</free>
            </drive>
        </c5>
        <c6>345680142336</c6>
        <c7>13.6</c7>
    </r>
</body>

更新新手册：

                $(document).ready(function(){
                $.ajax({
                    type: "GET",
                    url: 'clients.xml',
                    dataType: "xml",
                    success: function(xml) {
                        $(xml).find("systems").each(function () {
                            var LabelMetric = $(this).find('header').children().text();
                            $(this).find('body').children().each(function () {
                                var valueMetric = $(this).text();

                                $("#tablexml").last().append('<tr><td width="33%" valign="top">' + LabelMetric + '</td> + <td width="33%" valign="top">' + valueMetric + '</td></tr>');
                            });
                        });
                      }
                });
            });

如何从xml中获取jQuery中的动态表

0 个答案: