0

我一直在为这个看似简单的问题而烦恼，但我无法解决这个问题。

我正在尝试使用 AJAX 和一些 JQuery 在 HTML 中生成一个表。XML 包含我要呈现的数据，每个子节点都在新行上呈现。AJAX 完成所有繁重的工作并生成表格。

XML 代码：

    <?xml version="1.0" encoding="utf-8"?>

<shows>
  <show>
    <title>Title</title>
    <light>
      <rule>Rule 1</rule>
      <rule>Rule 2</rule>
    </light>
    <medium>
      <rule>Rule 3</rule>
      <rule>Rule 4</rule>
    </medium>
    <hard>
      <rule>Rule 5</rule>
      <rule>Rule 6</rule>
    </hard>
    <extreme>
      <rule>Rule 7</rule>
    </extreme>
  </show>
</shows>

显然，我会收集到更多的数据，但这不是重点。

相关的 HTML

<table id="rules"></table>

和 Javascript：

$(xml).find('shows > show').each(function () {                                                  
                var title = $(this).find('title').text();                                                       
                title = "<tr>" + "<th>" + "</th>" + "<th>" + "<h1>" + title + "</h1>" + "</th>" + "</tr>";

                category = "<tr>" + "<th>" + "</th>" + "<th>" + "Category Title: " + "</th>" + "</tr>";
                rule = $(this).find('light > rule').text(); //problem is here?
                punish = punish + "<tr>" + "<td>" + ruleCount + "</td>" + "<td>" + rule + "</td>" + "</tr>";

Javascript 的功能远不止于此，但我相信上面的评论是我头痛的罪魁祸首。它在脚本中基本上也被复制和粘贴了 3 次，并被修改以生成中等、困难和极端的规则。

这是问题所在：

标题、类别标签（表标题）、行、单元格都生成得很好，但需要渲染数据，以便在新行（或新表行，本质上）上创建每个节点（规则）。相反，该rule = $(this).find('light > rule').text();行将规则 1 和 2 挤在一起，将规则 3 和 4 挤在一起等等（显然在脚本中进一步重用时）。生成的 HTML 有点像这样：

<table id="rules">
     <tr><th></th><th><h1>Title</h1></th></tr>
     <tr><td>1</td><td>Rule1Rule2</td></tr>
</table>

我真正想要的是每条规则都在它自己的表格行上。像这样：

<table id="rules">
    <tr><th></th><th><h1>Title</h1></th></tr>
    <tr><td>1</td><td>Rule1</td></tr>
    <tr><td>2</td><td>Rule2</td></tr>
</table>

知道我做错了什么吗？

提前致谢。

4

2 回答 2

1

您需要使用循环来遍历每个规则

$(this).find('light > rule').each(function () {
    punish = punish + "<tr>" + "<td>" + (ruleCount++) +"</td>" + "<td>" + $(this).text() + "</td>" + "</tr>";
})
于 2013-11-05T04:12:16.840 回答
1 
rule = $(this).find('light > rule').text();

这会在灯光中选择两个规则元素。text()返回包装集中所有元素的文本的串联。您需要使用迭代每个规则each()

$(this).find('light > rule').each(function() {
    punish += "<tr><td>" + ruleCount + "</td><td>" + $(this).text() + "</td></tr>";
});
于 2013-11-05T04:13:20.317 回答