使用Javascript函数创建动态无序列表

我必须从父Id显示我的列表，每个孩子都有一个父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>

数学

拓扑学
阿尔盖布雷

阿尔盖布雷林埃酒店
算术

贝佐特酒店



信息

C-C++

尖头人酒店

我的数据保存在带有以下信息的表中：id、名称、父id

有人能帮我用javascript编写一个函数，使用表中的数据输出html代码吗？

使用来自（转换为javascript）的数据，您可以像这样创建所需节点的DOM树（假设所有父节点都列在其子节点之前）

试试这个jQuery插件（'jQuery.tmpl.js'）：

---

[http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html]

我的数据如下所示：id:1，名称：“数学”，父id:0；id:2，名称：“Topologie”，父id:1；id:3，姓名：“Algébre”，父id:1；id:4，姓名：“Algébre linéaire”，父母id:3；id:5，姓名：“Arithmétique”，家长id:3；id:6，姓名：“Théoréme de Bézout”，家长id:5；id:7，名称：“Informatique”，父id:0；id:8，名称：“c-c++”，父id:7；id:9，姓名：“Les pointeurs”，家长id:8；非常感谢你的回答，我在执行时有一个错误：uncaughttypeerror:无法调用unfinedil的方法'appendChild'，没问题，我已经修复了错误，再次想你

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