AJAX / JQuery - 在新表行上打印每个嵌套的子项

这个看似简单的问题而烦恼，但我无法绕开它。

我正在尝试使用 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>

显然，我会得到的不仅仅是这一小部分数据，但这不是重点。

相关网页

<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>

知道我做错了什么吗？？

提前谢谢。