javascript - 使用 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>

我的数据保存在包含以下信息的表中：id、name、parent Id。

有人可以帮我用 javascript 编写一个函数来使用表的数据输出一个 html 代码吗？

Answer 1

使用您昨天发布的问题中的数据（转换为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-templates-is-now-official-jquery.html]