创建使用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]