把Jquery转换成HTML表的麻烦

我知道有很多其他问题涉及到这个主题，但没有一个具体解决我的问题。把Jquery转换成HTML表的麻烦

我正在接受一个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="...>？

非常感谢您的帮助！

来源

2012-07-26 Spartacus

您不会将表格行附加到表格，而是附加到.menu。然而

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

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

南美长吻海豚也是正确的，：试试这个。不要追加关闭</table>标签。

来源

2012-07-26 16:38:34 Blazemonger

当然，编写这些代码可能有更有效的方法，但上述应该是解决您的问题的最简单的更改。 – Blazemonger 2012-07-26 16:40:18

这就是为什么我爱堆栈溢出！非常感谢你和tucuxi！有时你只需要一双新鲜的眼睛！有关我的问题的第二部分的任何想法？ – Spartacus 2012-07-26 16:47:44

这是一个不同的问题，你没有它的示例代码。我建议将这个帖子作为一个单独的问题发布（当然，在你试图自己处理它之后）。 – Blazemonger 2012-07-26 16:49:43

从$(".menu").append中删除最后的</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>")}); 
    }); 
};

然后，浏览器将所有多余的表开始标签进行补偿。

来源

2012-07-26 16:37:58 tucuxi

谢谢！好形式。 – Spartacus 2012-07-26 16:50:54

您总是会追加到.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); 
    }); 
}

来源

2012-07-26 16:42:02 feeela

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

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

来源

2012-07-26 16:43:21

XSLT并不是那么容易学习。而且，每个浏览器都有一些怪异的怪癖，因为它不受欢迎，所以他们一直没有打算修复。我建议避免它。 – Blazemonger 2012-07-26 16:45:22

实际上，我非常乐于学习如何做到这一点，但我对这个网站的期限很紧，并没有时间去学习新东西。但是这些日子我想进入XSLT。 – Spartacus 2012-07-26 16:53:46

我在代码中看到的问题是，最初您会在搜索“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>");

};

来源

2012-07-26 16:45:01 user1470118

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

使用相同的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网站引用来完成这一切。

来源

2012-07-26 21:53:17 Spartacus

把Jquery转换成HTML表的麻烦

回答

相关问题