Table表格在html里面占有很高的地位，许多网页都有着table的身影。
抽了一点时间写了一个简单的目录树，可以动态添加删除目录树节点。使用javascript实现目录树
首先，建立如下的目录与文件：使用javascript实现目录树
icons文件夹下面放入3个图片，1.gif(父节点展开时的图片),2.gif(子节点的图片),11.gif(父节点折叠时的图片);
其实使用javascript来完成目录树有很多的方法，其中一种就是使用table来做。
只需加入以下代码：
<html>
<script language="javascript">
function OnFormLoad(){
document.all.item("FormTabletd").innerHTML = GetTreeContent();
document.all.item("Info").innerHTML = "当前选中了第1个节点";
}
//js生成目录树
function GetTreeContent(){
var sTreeContent;
sTreeContent = "<table width=100% id='TreeTable' valign=top>";
sTreeContent += "<tr><td width=100%><table width=100% id='t1'>";
sTreeContent += "<tr><td width=100% id='parent1' onclick=javascript:OnClickParent('1')><img id='img1' src='icons/1.gif' >节点一<input type=hidden value='0' id='parenth1'><input type=hidden value='3' id='CurParIdChild1'></td></tr>";
sTreeContent += "<tr><td id='child11' width=100%> <img src='icons/2.gif'>节点一的子节点一</td></tr>";
sTreeContent += "<tr><td id='child12' width=100%> <img src='icons/2.gif'>节点一的子节点二</td></tr>";
sTreeContent += "<tr><td id='child13' width=100%> <img src='icons/2.gif'>节点一的子节点三</td></tr>";
sTreeContent += "</table></td></tr><tr><td width=100%><table width=100% id='t2'>";
sTreeContent += "<tr><td width=100% id='parent2' onclick=javascript:OnClickParent('2')><img id='img2' src='icons/1.gif'>节点二<input type=hidden value='0' id='parenth2'><input type=hidden value='3' id='CurParIdChild2'></td></tr>";
sTreeContent += "<tr><td id='child21' width=100%> <img src='icons/2.gif'>节点二的子节点一</td></tr>";
sTreeContent += "<tr><td id='child22' width=100%> <img src='icons/2.gif'>节点二的子节点二</td></tr>";
sTreeContent += "<tr><td id='child23' width=100%> <img src='icons/2.gif'>节点二的子节点三</td></tr>";
sTreeContent += "</table></td></tr><tr><td width=100%><table width=100% id='t3'>";
sTreeContent += "<tr><td width=100% id='parent3' onclick=javascript:OnClickParent('3')><img id='img3' src='icons/1.gif' >节点三<input type=hidden value='0' id='parenth3'><input type=hidden value='3' id='CurParIdChild3'></td></tr>";
sTreeContent += "<tr><td id='child31' width=100%> <img src='icons/2.gif'>节点三的子节点一</td></tr>";
sTreeContent += "<tr><td id='child32' width=100%> <img src='icons/2.gif'>节点三的子节点二</td></tr>";
sTreeContent += "<tr><td id='child33' width=100%> <img src='icons/2.gif'>节点三的子节点三</td></tr>";
sTreeContent += "</td></tr>";
sTreeContent += "</table>";
return sTreeContent;
}
function onClickParent(ParentID){
var piconsrc;
piconsrc = parseInt(document.all.item("parenth"+ParentID).value);
document.all.item("CurParID").value = ParentID;
var id;
id = parseInt(document.all.item("CurParIdChild"+ParentID).value);
document.all.item("Info").innerHTML = "当前选中了第" + ParentID + "个节点";
for(i=1;i<=id;i++){
if(piconsrc == 0){
document.all.item("img"+ParentID).src = "icons/11.gif";
document.all.item("child"+ParentID+i).style.display = "none";
document.all.item("parenth"+ParentID).value = '1';
}
else{
document.all.item("img"+ParentID).src = "icons/1.gif";
document.all.item("child"+ParentID+i).style.display = "block";
document.all.item("parenth"+ParentID).value = '0';
}
}
}
function OnAddNode(){
CurId = document.all.item("CurParID").value;
id = parseInt(document.all.item("CurParIdChild"+CurId).value);
sInner = document.all.item("t"+CurId);
document.all.item("CurParIdChild"+CurId).value = id+1;
MyId = id+1;
inner = "<td width=100%> <img src='icons/2.gif'>节点一的子节点</td>";
var newRow = sInner.insertRow(id+1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = inner;
nodeid = "child" + CurId + MyId;
newCell.id = nodeid;
}
function OnDelete(){
CurId = document.all.item("CurParID").value;
id = parseInt(document.all.item("CurParIdChild"+CurId).value);
if(id==0)
return;
sInner = document.all.item("t"+CurId);
sInner.deleteRow(id);
document.all.item("CurParIdChild"+CurId).value = id-1;
}
</script>
<body onload="javascript:OnFormLoad()">
<table width = 50% height=100%>
<tr>
<td id='Info'>aa</td>
</tr>
<tr>
<td width=100% id="FormTabletd"></td>
</tr>
<input type=button name='add' value="添加" onClick='javascript:OnAddNode()'>
<input type=button name='delete' value="删除" onClick='javascript:OnDelete()'>
<input type=hidden value='1' id='CurParID'>
</table>
</body>
</html>
还有其它方法，比如div，不过个人感觉还是使用table比较简单。