Question

我有这个部门。

<div id="parentTree"></div>

为了填充div，我在加载页面时调用了一个函数。

<body onload='populateMenu()'>

然后

function populateMenu(){
        var parent = document.getElementById('parentTree');
        var mystring = "";
        var num=3;
        for(var i=0; i<num; i++){
            mystring+="<div class='col1' onclick='populateMenu2(this)'>col1<div id='col1"+i+"'></div></div>";
        }
        parent.innerHTML = mystring;
    }

该函数运行正常，并显示了三行，

 Result:
col1 
col1 
col1

点击其中任何一个都会触发第二个功能：

function populateMenu2(element){
        var holder = element.children[0];
        if(holder.innerHTML == ""){
            var mystring = "";
            var num=3;
            for(var i=0; i<num; i++){
                mystring+="<div class='col2' onclick='populateMenu3(this)'>col2<div  id='col2"+i+"' ></div></div>";
            }
            holder.innerHTML = mystring;
        }

        else holder.innerHTML = "";

    }

此功能扩展行并按预期添加另外三行

Result:
col1 
    col2
    col2
    col2
col1 
col1

但是当我单击此col2时，第三个功能似乎不起作用。

function populateMenu3(element){
        var holder = element.children[0];
        if(holder.innerHTML == ""){
            var mystring = "";
            var num=3;
            for(var i=0; i<num; i++){
                mystring+="<div class='col3' >col3<div  id='col3"+i+"' ></div></div>";
            }
            holder.innerHTML = mystring;
        }

        else holder.innerHTML = "";
        //alert(ol_holder.id);
    }

我想要这个。

Result:
col1 
    col2
        col3
        col3
        col3
    col2
    col2
col1 
col1

但是那永远不会发生。我的代码有什么问题？

PS：我使用简单的CSS来缩进代码：

<style>
        .col2{margin-left:10px;}
        .col3{margin-left:20px;}
    </style>

动态表呈现不显示行列

0 个答案: