使用jQuery从XML文档创建表格

Question

我正尝试从XML文件创建动态HTML表格。在字母表的每个字母下有几个主要的“章节”。我想每个字母下将生成表格，类似这种格式：

Code  Description 
Q87.1  Some description 
F44.4  Another description 
... 

这里XML文件的样子：

<index> 
<letter> 
<title>A</title> 
<mainTerm> 
<title>Some description</title> 
<code>Q87.1</code> 
</mainTerm> 
<mainTerm> 
<title>Another description<nemod>(-some) (detail)</nemod></title> 
<code>F44.4</code> 
</mainTerm> 
<mainTerm> 
<title>A more detailed term</title> 
<seeAlso>similar terms</seeAlso> 
    <term level="1"> 
<title>acute</title> 
<code>R10.0</code> 
</term> 
<term level="1"> 
<title>angina</title> 
<code>K55.1</code> 
</term> 
</mainTerm> 
</letter> 
..... 
</index> 

而且这里是jQuery代码我通过创建表与ID =“内容”一个div：

$(document).find("letter").each(function(){ 
// Define letters variable 
$letters = $(this).find('> title').text(); 

//Find descendants of each letter    
$codes = ($(this).find('code').text()); 
$desc = ($(this)).find('mainTerm title').text(); 

//Build table 
$("#content").append(
    '<table border="1"><tr><th>Code</th><th>Description</th></tr><tr><td> '+$codes+' </td><td> '+$desc+' </td></tr></table>' 
    );    
(end brackets for the above) 

我得到的输出是只有一行对每个字母/章节，所有的码表，所有的描述集中一起在一个单元中。

我需要的是一个动态表，其中每行都有一个单独的代码及其相应的描述。我怎么做？

Answer 1

var extractTerms = function ($xml, selector) { 
 
     return $.makeArray($xml.find(selector).map(function() { 
 
      var term = {title: $(this).children('title:first').text()}; 
 
      var $code = $(this).children('code:first'); 
 
      if ($code.length > 0) 
 
      { 
 
       term.code = $code.text(); 
 
      } 
 
      else 
 
      { 
 
       term.seeAlso = $(this).children('seeAlso:first').text(); 
 
      } 
 
      var terms = extractTerms($(this), 'term'); 
 
      if(terms.length > 0) 
 
      { 
 
       term.terms = terms; 
 
      } 
 
      return term; 
 
     })); 
 
    }; 
 
    var loadTable = function (terms) { 
 
     var $table = $('<table><thead><tr><td>Code</td><td>Description</td></tr></thead></table>').append($.map(terms, function (e, i) { 
 
      var $row = $('<tr><td>' + (e.code || '') + '</td><td><div>' + e.title + '</div></td></tr>'); 
 
      if (e.terms) 
 
      { 
 
       $('<div></div>').append(loadTable(e.terms)).appendTo($row.children('td:nth-child(2)')); 
 
      } 
 
      return $row; 
 
     })); 
 
     return $table; 
 
    }; 
 
    $(function() { 
 
     var xml = '<index> <letter> <title>A</title> <mainTerm> <title>Some description</title> <code>Q87.1</code> </mainTerm> <mainTerm> <title>Another description<nemod>(-some) (detail)</nemod></title> <code>F44.4</code> </mainTerm> <mainTerm> <title>A more detailed term</title> <seeAlso>similar terms</seeAlso> <term level="1"> <title>acute</title> <code>R10.0</code> </term> <term level="1"> <title>angina</title> <code>K55.1</code> </term> </mainTerm> </letter> </index>'; 
 
     var $xml = $(xml); 
 
     var terms = extractTerms($xml, 'mainTerm'); 
 
     var $table = loadTable(terms); 
 
     $('body').append($table); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>