jQueryを使用してXML文書から表を作成

Question

XMLファイルから動的HTML表を作成しようとしています。アルファベットの各文字の下には、いくつかの主要な「章」があ​​ります。私はこのような形式で、表は各文字の下に生成されるようにしたい：

<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のコードです：ここで

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

は、XMLファイルは、次のようになります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) 

私は出力で取得すると、すべてのコードで、各文字/チャプター、のためだけの1行を持つテーブルであり、すべての記述が集中します1つのセルにまとめて。

私が必要とするのは、各行に1つのコードとそれに対応する記述がある動的なテーブルです。それ、どうやったら出来るの？

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>