創建使用JavaScript函數

Question

我不得不從parentId的顯示我的列表中動態無序列表，每個孩子都有一個父ID，

<ul> 
     <li>Maths</li> 
     <ul> 
      <li>Topologie</li> 
      <li>Algèbre</li> 
      <ul> 
       <li>Algèbre linéaire</li> 
       <li>Arithmétique</li> 
       <ul> 
        <li>Thérorème de Bézout</li> 
       </ul> 
      </ul> 
     </ul> 
     <li>Informatique</li> 
     <ul> 
      <li>C-C++</li> 
      <ul> 
       <li>Les pointeurs</li> 
      </ul> 
     </ul> 
    </ul> 

我的數據保存在一個表具有以下信息：身份證，名稱，父母身份。

有人可以幫我寫一個JavaScript函數來輸出一個HTML代碼使用表的數據？

Answer 1

從the question you posted yesterday（轉換爲的JavaScript）使用數據，您可以創建你想要這樣的節點的DOM樹（假設所有的父節點自己的孩子之前上市）

function generateList(data) { 
    var i, item, ref = {}, counts = {}; 
    function ul() {return document.createElement('ul');} 
    function li(text) { 
     var e = document.createElement('li'); 
     e.appendChild(document.createTextNode(text)); 
     return e; 
    } 
    ref[0] = ul(); 
    counts[0] = 1; 
    for (i = 0; i < data.length; ++i) { 
     ref[data[i].parentId].appendChild(li(data[i]['name'])); // create <li> 
     ref[data[i].id] = ul(); // assume + create <ul> 
     ref[data[i].parentId].appendChild(ref[data[i].id]); 
     counts[data[i].id] = 0; 
     counts[data[i].parentId] += 1; 
    } 
    for (i in counts) // for every <ul> 
     if (counts[i] === 0) // if it never had anything appened to it 
      ref[i].parentNode.removeChild(ref[i]); // remove it 
    return ref[0]; 
} 

var data = [ 
    {'id': 1, 'parentId': 0, 'name': 'Maths'}, 
    {'id': 2, 'parentId': 1, 'name': 'Topologie'}, 
    {'id': 3, 'parentId': 1, 'name': 'Algèbre'}, 
    {'id': 4, 'parentId': 3, 'name': 'Algèbre linéaire'}, 
    {'id': 5, 'parentId': 3, 'name': 'Arithmétique'}, 
    {'id': 6, 'parentId': 5, 'name': 'Thérorème de Bézout'}, 
    {'id': 7, 'parentId': 0, 'name': 'Informatique'}, 
    {'id': 8, 'parentId': 7, 'name': 'C-C++'}, 
    {'id': 9, 'parentId': 8, 'name': 'Les pointeurs'} 
]; 

最後，用它

generateList(data); 

Answer 2

試試這個jQuery插件（ 'jquery.tmpl.js'）： [http://www.borismoore.com/2010/10/jquery-templ ates-is-now-official-jquery.html]