javascript - 在 AngularJS 中将 XML 解析为 HTML 表

Question

我有需要渲染到 HTML 表中的 xml。

此处为 xml ---

<Table>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=ccc1faa7-f80d-43a7-8a3e-f1c4dfd79fc8>Cat. No. </Cell>\n  <Cell cellWidth=2065 cellId=0f3ece80-3001-4ee3-afa0-533f48c14ea2>Wire Range AWG  </Cell>\n  <Cell cellWidth=796 cellId=cf6ad35f-bbab-481e-8453-bfc7bf7d2a4a>Wire Type, Cu </Cell>\n  <Cell cellWidth=450 cellId=30888d78-be9e-438a-90a8-b86747d5cf5f>FW  </Cell>\n  <Cell cellWidth=900 cellId=6b3c509f-ed46-4078-8d45-e9d2f446d8a2>Torque N·m </Cell>\n  <Cell cellWidth=990 cellId=7a90544f-7628-4be0-b8be-0c1c0ccac572>Voltage V </Cell>\n  <Cell cellWidth=1813 cellId=c94a30f9-cb6c-4090-8cae-9805b6ea8ad6>Current A </Cell>\n  <Cell cellWidth=568 cellId=80d5d978-2278-4657-8ac7-55f464b34d1d>UG </Cell>\n  <Cell cellWidth=1057 cellId=61b011ca-b707-46a1-8eaf-3e8a0a789d85>CA </Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=73b236fc-3639-4d45-9704-7b1760661a3d rowSpanIndex=0></Cell>\n  <Cell cellWidth=1059 cellId=5a7e6c9a-7074-42ce-98de-6a52df6a19fb columnSplitIndex=1>Front </Cell>\n  <Cell cellWidth=1006 cellId=8bdb1d8b-b302-4349-b512-6e404a4f09eb columnSplitIndex=1>Back </Cell>\n  <Cell cellWidth=796 cellId=f4568ead-293d-4781-8e1b-fbbf735f751f rowSpanIndex=2></Cell>\n  <Cell cellWidth=450 cellId=c0da00e6-f39a-4650-898e-a9e9a1532f4d rowSpanIndex=3></Cell>\n  <Cell cellWidth=900 cellId=91dd22c1-c1ed-429c-800e-642fbe286a0d rowSpanIndex=4></Cell>\n  <Cell cellWidth=990 cellId=14652a0d-d82e-474b-89d6-403f9744968c rowSpanIndex=5></Cell>\n  <Cell cellWidth=757 cellId=18bf9cd0-b20f-4e09-a55c-c3c838d4cbf8 columnSplitIndex=6>Front </Cell>\n  <Cell cellWidth=1056 cellId=ee5816c1-895a-49a2-9bc5-7e8a098813a0 columnSplitIndex=6>Back </Cell>\n  <Cell cellWidth=568 cellId=88468527-97f8-449e-96f1-d69a25d8f750 rowSpanIndex=7></Cell>\n  <Cell cellWidth=1057 cellId=3c6674f5-0fe9-47f0-b4c4-065be55b30ba rowSpanIndex=8></Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=8100b2c7-fb67-463c-b5c8-6364506db726>SFK 4 M 65A </Cell>\n  <Cell cellWidth=1059 cellId=4dbfe37e-484a-4104-990c-95cd4b137ca9 columnSplitIndex=1>6 </Cell>\n  <Cell cellWidth=1006 cellId=b7d96e78-cb2f-4d51-a4bc-275d27ad81a3 columnSplitIndex=1>1 x 14\n 5 x 16 </Cell>\n  <Cell cellWidth=796 cellId=674c21fe-bb6c-4ee3-b63e-4e11a919e673>str </Cell>\n  <Cell cellWidth=450 cellId=5482f26e-aaaf-4801-81f3-58079aa16873>2 </Cell>\n  <Cell cellWidth=900 cellId=41b0d9c7-76fb-4451-ae33-e99216390b8f>2 </Cell>\n  <Cell cellWidth=990 cellId=785670cf-9db3-438e-81f2-6d4a702bb11a>300 </Cell>\n  <Cell cellWidth=757 cellId=97973c3e-9332-4818-a3ae-3a6ef7c9a0b5 columnSplitIndex=6>65 </Cell>\n  <Cell cellWidth=1056 cellId=97738ef1-8057-4074-b77a-daa5263c1d2b columnSplitIndex=6>1 x 15\n 5 x 10 </Cell>\n  <Cell cellWidth=568 cellId=57e1e758-e429-40fb-b037-148711b82ce4>B, C </Cell>\n  <Cell cellWidth=1057 cellId=efee41f9-198d-4bfe-93ad-b3038a1b312f>2(115), 4 </Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=ad580518-d5a7-4bee-b3aa-ad078142a32a rowSpanIndex=0></Cell>\n  <Cell cellWidth=1059 cellId=7fddf62a-0bcf-459d-871d-950b84a0d008 columnSplitIndex=1>6 </Cell>\n  <Cell cellWidth=1006 cellId=32b943c7-7d6f-4854-b357-873de8fce6db columnSplitIndex=1>6 x 16 </Cell>\n  <Cell cellWidth=796 cellId=dd72b05b-2f8b-4399-b4d4-a6b8e49dfbb1>str </Cell>\n  <Cell cellWidth=450 cellId=3041ef95-c317-44b2-946c-099c2e1d7643>2 </Cell>\n  <Cell cellWidth=900 cellId=07bcc3ab-1b0e-4313-8b10-de8083e88a7f>2 </Cell>\n  <Cell cellWidth=990 cellId=85375ca9-d71f-4d8d-98ef-4000178f2974>300 </Cell>\n  <Cell cellWidth=757 cellId=f1f72c08-a3c5-4616-8af5-ea2e6a1f4d50 columnSplitIndex=6>60 </Cell>\n  <Cell cellWidth=1056 cellId=a79eac2a-ac11-4e57-b585-201d4290a63c columnSplitIndex=6>6 x 10 </Cell>\n  <Cell cellWidth=568 cellId=3570fda3-04b6-4887-a4b1-e65ecec696f1>B, C </Cell>\n  <Cell cellWidth=1057 cellId=65690de0-3527-4023-8819-316fccf54084>2(115), 4 </Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=ed74958b-79cd-4db3-8974-11817da5e6bb>SFK 4 M 30A </Cell>\n  <Cell cellWidth=1059 cellId=0fa7659c-c331-4882-af9d-a1d2d63fe834 columnSplitIndex=1>10 </Cell>\n  <Cell cellWidth=1006 cellId=dd86b1f3-7eeb-41ec-894a-1f1783ad7962 columnSplitIndex=1>6 x 20 </Cell>\n  <Cell cellWidth=796 cellId=aad83ff2-0675-42f6-af86-93ee2d19f52e>str </Cell>\n  <Cell cellWidth=450 cellId=d8a9c260-1a47-421e-9799-d423df19fc85>2 </Cell>\n  <Cell cellWidth=900 cellId=28238266-ba52-4bc0-8cee-bbded5d5629b>2 </Cell>\n  <Cell cellWidth=990 cellId=c2ddc704-b498-4763-be89-b85ee8285719>300 </Cell>\n  <Cell cellWidth=757 cellId=2a6a2a47-31fc-46b0-8728-b4935ccc74fc columnSplitIndex=6>30 </Cell>\n  <Cell cellWidth=1056 cellId=1487e210-50e7-4eff-a383-da50a89fd547 columnSplitIndex=6>6 x 5 </Cell>\n  <Cell cellWidth=568 cellId=d736ecef-4ad0-4297-8bee-95ebac27a6a0>B, C </Cell>\n  <Cell cellWidth=1057 cellId=1b9e53f2-6061-46c4-adfb-02e40f3d0580>2(115), 4 </Cell>\n </Row>\n</Table>"

这里是demo

rowSpanIndex = 2 --- 指示此空白单元格与其上方的第 2 列跨越

colSpanSize = 5 --- 表示此单元格跨过 5 列

columnSplitIndex=6 --- 与第 6 列进行分割(本质上标题列 6 将在 html 中获得跨度)

忽略所有 id 属性

Answer 1

好吧，你有两个选择

首先:将XML转换为json并用它来格式化你想要的表格我建议你看看这个link

第二:解析XML并提取你想要的数据并将其转换为HTML，这会更复杂，我建议你看看这个link

更新:另一种选择是使用 XSLT 在 HTML 中使用 XML 本身请参阅here , here和 here更新:对于第二个选项，它会是这样的

<div ng-controller="myCtrl">
  <pre class="prettyprint lang-xml"></pre>
</div>

App.directive('prettyprint', function() {
  return {
    restrict: 'C',
    link: function postLink(scope, element, attrs) {
        var xmlDoc = scope.dom;
        var table="<tr><th>Artist</th><th>Title</th></tr>";
        var x = xmlDoc.getElementsByTagName("CD");

        //here you will get form the xml node all the data that will build each row and append it to the table
        for (var i = 0; i <x.length; i++) {
            table += "<tr><td>" +
            x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
            "</td></tr>";
        }

        //return the table 
        element.text(table);
    }
  };
});