Question

我知道有很多其他问题可以解决这个问题，但没有一个专门解决我的问题。

我正在使用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>，而每个<item>中的<cat>代码必须是包含<table>的表行。我的Jquery代码出错了吗？
某些<desc>值需要链接到图片，但不是全部。如果我只将<imgurl>添加到XML文件中的某些<item>标记，那么如何使用Jquery将其作为<a href="...>正确地写入表中？

非常感谢您的帮助！

Answer 1

从内部</table>移除最后一个$(".menu").append，然后将其添加到外部$(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>")}); }); };。 JQuery的追加将元素放在一起 - 因此将格式良好的表行放入格式良好的表中是有意义的，而不是试图用每个表行关闭表。

另外，请按如下方式对表格进行引用： function parseXML（xml）{

{{1}}

然后，浏览器会添加所有额外的table-start-tags以进行补偿。

Answer 2

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

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

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

然而，tucuxi也是对的。请勿附加结束</table>代码。

Answer 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 );
    } );
}

Answer 4

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

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

Answer 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>");

};

Answer 6

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

使用相同的XML文件，目前只有部分<item>代码具有imgurl=""属性，其中包含照片的相对网址。

我修改了我的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网站完成了这一切。引用。

无法使用Jquery将XML转换为HTML表

6 个答案: