<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="tree"></ul>
<script type="text/javascript">
var data = [
{
name:'t1',
child:[
{
name:'t1-1'
},
{
name:'t1-2',
child:[
{
name:'t1-2-1'
},
{
name:'t1-2-2'
},
{
name:'t1-2-3'
}
]
},
{
name:'t1-3'
}
]
},
{
name:'t2',
child:[
{
name:'t2-1'
},
{
name:'t2-2',
child:[
{
name:'t2-2-1'
}
]
}
]
},
{
name:'t3'
},
{
name:'t4',
child:[
{
name:'t4-1'
},
{
name:'t4-2',
child:[
{
name:'t4-2-1'
},
{
name:'t4-2-2'
}
]
}
]
}
];
var otree = document.getElementById("tree");
function tree(box,data){
for (var i = 0; i < data.length; i++) {
var _oUl = document.createElement("ul");
var _oLi = document.createElement("li");
_oLi.innerHTML = data[i].name;
if(data[i].child){
_oLi.appendChild(_oUl);
tree(_oUl,data[i].child);
}
box.appendChild(_oLi);
}
}
tree(otree,data);
</script>
</body>
</html>
js 输出树形结构
猜你喜欢
转载自blog.csdn.net/qiuqidehao/article/details/80774198
今日推荐
周排行