javascript动态树形结构的实现

来源：互联网发布：淘宝网消保规则编辑：程序博客网时间：2024/06/05 05:21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

function all(){

node('d1', 'd0', '111');

node('d2', 'd1', 'aaa');

node('d3', 'd2', 'bbb');

node('d4', 'd1', 'ccc');

node('d5', 'd1', 'ddd');

                node('d6', 'd4', 'eee');

               node('d7', 'd3', 'fff');

               node('d8', 'd0', '222');

           }

function node(id, pid, txt){

var kong = ""

var father = document.getElementById(pid);

var child = document.createElement("div");

child.id = id;

for (var i = 0; i < father.age - 0; i++) {

kong = kong + "  ";

}

child.age = (father.age - 0 + 1);

child.innerHTML = kong + txt;

child.onclick = show;

father.appendChild(child);

if (pid != "d0") {

child.style.display = "none";

}

function show(){

window.event.cancelBubble = true;

var parents = window.event.srcElement.id;

var childs = document.getElementById(parents).childNodes;

for (var i = 1; i < childs.length; i++) {

if (childs[i].style.display == "none")

childs[i].style.display = "block";

else

childs[i].style.display = "none";

}

</script>

</head>

</div>

</body>

</html>