使用 Jquery 将 XML 转换为 HTML 表时遇到问题答案

【问题标题】：Trouble turning XML into HTML table with Jquery使用 Jquery 将 XML 转换为 HTML 表时遇到问题
【发布时间】：2012-07-26 16:33:21
【问题描述】：

我知道还有很多其他问题涉及这个主题，但没有一个专门解决我的问题。

我正在获取一个 XML 文件，使用 Jquery 对其进行解析并将其转换为 HTML 表格。在页面视觉上，它看起来不错；桌子看起来应该。但实际上，Jquery 对 html 做了一些奇怪的事情。

这是 XML：

<?xml version="1.0" encoding="us-ascii"?>
<wsmenu>
<cat id="snacks">
    <item>
        <desc>marta&#8217;s fresh tortillas &amp; camp bread, pit master fat</desc>
        <price>4</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>smoked almonds, chile salt</desc>
        <price>4</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>smoked marinated olives</desc>
        <price>4</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>crispy potatoes, smoked garlic aioli</desc>
        <price>6</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>smoked artichokes, lemon and parmesan</desc>
        <price>9</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>smoked hummus, pit master fat camp bread &amp; tortilla chips</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>smoked whitefish dip, fresh tortilla chips</desc>
        <price>9</price>
        <wood>o</wood>
    </item>
</cat>
<cat id="salads">
    <item>
        <desc>smoked chicory, chicken chicharron, mustard-red wine vinaigrette, provolone</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>3 kale salad, celery greens, guanciale, smoked pepita, manchego</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>hickory braised spelt, smoked almond pesto &amp; tomato</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>beet and fresh ricotta salad, smoked pistachios</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
</cat>
<cat id="sandwiches">
    <item>
        <desc>pulled pork, bbq, house cole slaw, mustard &amp; pickles</desc>
        <price>8</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>chopped beef, house mustard &amp; pickles</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>woodshed burger, chopped beef, todays sausage, smoked cheddar, traditional garnish</desc>
        <price>11</price>
        <wood>h</wood>
    </item>
</cat>
<cat id="simple plates">
    <item>
        <desc>brisket stuffed piquillo peppers, bone broth &amp; cotija</desc>
        <price>9</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>local acorn squash, tuaca, dark brown sugar, smoked pepper hollandaise</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>today&#8217;s sausage, house mustard &amp; pickles</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>pea tendrils, smoked chilies, citrus &amp; hickory butter</desc>
        <price>8</price>
        <wood>o</wood>
    </item>
</cat>
<cat id="tacos">
    <item>
        <desc>brisket stuffed piquillo peppers, bone broth &amp; cotija</desc>
        <price>9</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>local acorn squash, tuaca, dark brown sugar, smoked pepper hollandaise</desc>
        <price>9</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>today&#8217;s sausage, house mustard &amp; pickles</desc>
        <price>10</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>pea tendrils, smoked chilies, citrus &amp; hickory butter</desc>
        <price>9</price>
        <wood>m</wood>
    </item>
</cat>
<cat id="traditional q">
    <item>
        <desc>beef ribs</desc>
        <price>12/lb</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>pork ribs</desc>
        <price>12/lb</price>
        <wood>p</wood>
    </item>
    <item>
        <desc>smoked beef tenderloin</desc>
        <sub>served cold</sub>
        <price>11</price>
        <wood>h</wood>
    </item>
</cat>
<cat id="new q">
    <item>
        <desc>smoked red fish enpapillote, vegetables of the season</desc>
        <price>19</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>game bird, wood braised spelt &amp; smoked artichokes</desc>
        <price>21</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>fancy mushrooms of the season, 4 chiles, polenta, vin cotta &amp; hen egg</desc>
        <price>18</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>bowl of ramen noodles, bone broth, pulled pork, chiles, &amp; quail egg</desc>
        <price>15</price>
        <wood>p</wood>
    </item>
</cat>
<cat id="dining with friends">
    <sub>please allow 30 minutes, feeds 4 people</sub>
    <item>
        <desc>16 hour smoked beef shin, fresh ricotta, chile, smoked oil borracho beans, 3 kale salad</desc>
        <price>75</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>open fire paella of mussels, clams, shrimp rabbit-rattlesnake sausage, game bird, fennel aioli</desc>
        <price>75</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>60 oz. bistecca alla fiorentina, crispy potatoes</desc>
        <price>90</price>
        <wood>m</wood>
    </item>
</cat>
<cat id="sides">
    <item>
        <desc>fresh chips</desc>
        <price>5</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>smoked Loaded baked potato</desc>
        <sub>add pork or beef $3</sub>
        <price>5</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>borracho beans</desc>
        <price>5</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>mexican corn</desc>
        <price>4</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>confit potato salad, mint, red pepper, crispy garlic</desc>
        <price>4</price>
        <wood>m</wood>
    </item>
</cat>
</wsmenu>

这是 Jquery：

function parseXML(xml){
$(xml).find("cat").each(function()
{
  $(".menu").append("<table class='mnutbl'><tr><th>"+$(this).attr("id")+"</th></tr>");

$(this).find("item").each(function()
{
    $(".menu").append("<tr class='mnutbl'><td>"+$(this).find("wood").text()+
    "</td><td>"+$(this).find("desc").text()+
    "</a></td><td>"+$(this).find("price").text()+
    "</td></tr></table>")});
});
};

当前输出：

Jquery is writing <table> and <th> with attribute "id" for each <cat> tag, then separate <tr> for each <item> tag (these <tr>'s are NOT contained in the <table>), like so:
<table class="mnutbl">
 <tr>
  <th>Snacks</th>
 </tr>
</table>
<tr>
 <td>m</td>
 <td>marta's fresh...</td>
 <td>4</td>
</tr>
etc.......

两部分问题：

每个<cat> 标记必须是它自己的<table>，并且每个<cat> 中的<item> 标记必须是<table> 内的表行。我的 Jquery 代码有问题吗？
一些<desc> 值需要是指向图像的链接，但不是全部。如果我将<imgurl> 添加到XML 文件中的一些<item> 标记中，我如何使用Jquery 将其作为<a href="...> 正确写入表中？

非常感谢您的帮助！

【问题讨论】：

标签： jquery html xml xml-parsing

【解决方案1】：

您不是将表格行附加到表格，而是附加到.menu。试试这个：

$(".menu").find('table').last().append("<tr ..... ");

http://jsfiddle.net/mblase75/fppfX/

不过吐槽西也是对的。不要附加结束 </table> 标记。

【讨论】：

当然，可能有更有效的方法来编写这段代码，但以上应该是解决您的问题的最简单的更改。
这就是我喜欢 Stack Overflow 的原因！非常感谢你和图库西！有时你只需要一双新鲜的眼睛！对我的问题的第二部分有任何想法吗？
这是一个不同的问题，你没有它的示例代码。我建议将其作为一个单独的问题发布（当然，在您尝试自己解决之后）。

【解决方案2】：

从内部$(".menu").append 中删除最后一个</table>，并将其添加到外部</table>。 JQuery 的 append 将元素相互放置 - 因此将格式良好的表格行放入格式良好的表格中是有意义的，而不是尝试用每个表格行关闭表格。

另外，请保持对表格的引用，如下所示：函数 parseXML(xml){

$(xml).find("cat").each(function() {
  var table = $("<table class='mnutbl'><tr><th>"+$(this).attr("id")+
    "</th></tr></table>");
  $(".menu").append(table);

  $(this).find("item").each(function(){
    table.append("<tr class='mnutbl'><td>"+$(this).find("wood").text()+
      "</td><td>"+$(this).find("desc").text()+
      "</a></td><td>"+$(this).find("price").text()+
      "</td></tr>")});
  });
};

浏览器会添加所有额外的 table-start-tags 来补偿。

【讨论】：

【解决方案3】：

您总是附加到.menu，但您必须将项目附加到表中。为此，请为表提供一个 ID 以对其进行识别。或者更简单：将其存储到一个变量中，首先附加所有行，然后将整个表附加到页面。

function parseXML( xml ) {
    $( xml ).find( 'cat' ).each( function() {
        var id = $( this ).attr( 'id' );
        var table = $( '<table class="mnutbl" id="' + id  + '"><tr><th>' + id  + '</th></tr></table>' );

        $( this ).find( 'item' ).each( function() {
            table.append( '<tr><td>' +
                $( this ).find('wood').text() +
                '</td><td>' + $( this ).find( 'desc' ).text() +
                '</a></td><td>' + $( this ).find( 'price' ).text() +
                '</td></tr>' );
        } );

        $( '.menu' ).append( table );
    } );
}

【讨论】：

【解决方案4】：

此问题的更好解决方案是使用 XSL 转换 (XSLT)，这是一种专门为此类任务创建的语言。

转换背后的语言和逻辑非常简单易学。你可以在这里查看： http://www.w3schools.com/xsl/

【讨论】：

XSLT 并不是那么容易学习。此外，每个浏览器都有一些错误的怪癖，由于缺乏普及，他们没有费心去修复。我建议避免它。
我实际上非常愿意学习如何做到这一点，但我在这个网站上的最后期限很紧，没有时间学习新东西。但其中一天我想深入研究 XSLT。

【解决方案5】：

我在您的代码中看到的问题是，最初您在搜索“item”标签时关闭了表格标签。

function parseXML(xml){
$(xml).find("cat").each(function()
{
  $(".menu").append("<table class='mnutbl'><tr><th>"+$(this).attr("id")+"</th></tr>");

$(this).find("item").each(function()
{
    $(".menu").append("<tr class='mnutbl'><td>"+$(this).find("wood").text()+
        "</td><td>"+$(this).find("desc").text()+
        "</a></td><td>"+$(this).find("price").text()+
        "</td></tr>")});
    });
$(".menu").append("</table>");

};

【讨论】：

【解决方案6】：

我实际上回答了问题的第二部分。

使用相同的 XML 文件，只是这次一些 <item> 标记现在具有 imgurl="" 属性，其中包含照片的相对 url。

我更改了我的 JQuery 函数 parseXML 以包含一个条件来检查属性 imgurl 是否存在，然后在项目描述周围创建指向它的链接

代码如下：

function parseXML(xml){
$(xml).find("cat").each(function()
{
$(".menu").append("<table class='mnutbl'><tr><th>"+$(this).attr("id")+"</th></tr>");

$(this).find("item").each(function()
{
    var $x;
    var $image = $(this).attr("imgurl");
    if ($image == null) {
        $x = $(this).find("desc").text();
    }
    else {
        $x = "<a href='"+$image+"'>"+$(this).find("desc").text()+"</a>"
    }
    $(".menu").find("table").last().append("<tr><td>"+$(this).find("wood").text()+
    "</td><td>"+$x+"</td><td>"+$(this).find("price").text()+
    "</td></tr>")
});
$(".menu").append("</table>");
});
};

我为自己感到非常自豪，因为我对这个级别的编程仍然很陌生（这对你们大多数人来说可能是非常基础的），并且我设法通过 w3c 和 jQuery 网站自己完成了这一切参考文献。

【讨论】：