用js实现树形结构
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body{ font: 10pt
宋体,sans-serif; color: navy; } .branch{ cursor: pointer; cursor: hand;
display: block; } .leaf{ display: none; margin-left: 16px; } a{
text-decoration: none; } a:hover{ text-decoration: underline; }
</style>
</head>
<script type="text/javascript">
function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block") objBranch.display="none";
else
objBranch.display="block"; swapFolder('I' + branch); }
function swapFolder(img){ objImg = document.getElementById(img); if
(objImg.src.indexOf('closed.gif')>-1) objImg.src = openImg.src; else
objImg.src = closedImg.src; }
function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
function addBranch(branch){
this.branches[this.branches.length] = branch;
}
function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i<numBranches;i++){
treeString += this.branches[i].write();
document.write(treeString);
}
}
function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}
function writeBranch(){
var branchString =
'<span class="branch"' + 'onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="closed.gif" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for (var j=0;j< numLeaves;j++) branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}
function leaf(text, link){
this.text = text;
this.link = link;
this.write = writeLeaf;
}
function writeLeaf(){
var leafString = '<a href="' + this.link + '">';
leafString += '<img src="doc.gif" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}
var myTree = new tree();
var branch1 = new branch('branch1','JavaScript参考书');
var leaf1 = new leaf('前言','#');
var leaf2 = new leaf('绪论','#');
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);
var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','#'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);
var branch3 = new branch('branch2','第二章');
branch3.add(new leaf('第一节','#'));
branch3.add(new leaf('第二节','#'));
branch3.add(new leaf('第三节','#'));
branch1.add(branch3);
myTree.add(new leaf('联系我们','#'));
myTree.write();
</script>
<body>
</body>
</html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body{ font: 10pt
宋体,sans-serif; color: navy; } .branch{ cursor: pointer; cursor: hand;
display: block; } .leaf{ display: none; margin-left: 16px; } a{
text-decoration: none; } a:hover{ text-decoration: underline; }
</style>
</head>
<script type="text/javascript">
function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block") objBranch.display="none";
else
objBranch.display="block"; swapFolder('I' + branch); }
function swapFolder(img){ objImg = document.getElementById(img); if
(objImg.src.indexOf('closed.gif')>-1) objImg.src = openImg.src; else
objImg.src = closedImg.src; }
function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
function addBranch(branch){
this.branches[this.branches.length] = branch;
}
function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i<numBranches;i++){
treeString += this.branches[i].write();
document.write(treeString);
}
}
function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}
function writeBranch(){
var branchString =
'<span class="branch"' + 'onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="closed.gif" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for (var j=0;j< numLeaves;j++) branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}
function leaf(text, link){
this.text = text;
this.link = link;
this.write = writeLeaf;
}
function writeLeaf(){
var leafString = '<a href="' + this.link + '">';
leafString += '<img src="doc.gif" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}
var myTree = new tree();
var branch1 = new branch('branch1','JavaScript参考书');
var leaf1 = new leaf('前言','#');
var leaf2 = new leaf('绪论','#');
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);
var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','#'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);
var branch3 = new branch('branch2','第二章');
branch3.add(new leaf('第一节','#'));
branch3.add(new leaf('第二节','#'));
branch3.add(new leaf('第三节','#'));
branch1.add(branch3);
myTree.add(new leaf('联系我们','#'));
myTree.write();
</script>
<body>
</body>
</html>