日期:2014-05-20 浏览次数:20804 次
<html>
<head>
<script>
function getChild(imageObject)
{
var tableTree = document.getElementById("tableTree");
var currentRow = imageObject.parentNode.parentNode;
var imageCount = currentRow.getElementsByTagName("img").length;
var currentRowIndex = 0;
for(currentRowIndex = 0;currentRowIndex < tableTree.rows.length;currentRowIndex++)
{
if(tableTree.rows[currentRowIndex] == currentRow)
{
break;
}
}
if(imageObject.src.indexOf("_plus1.gif") != -1)
{
imageObject.src = imageObject.src.replace("http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif","http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif");
var newTr = tableTree.insertRow(currentRowIndex+1);
var newTd = newTr.insertCell(0);
var imageStr = "";
for(var i = 0;i < imageCount;i++)
{
imageStr += "<img src='http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif'/>";
}
newTd.innerHTML = imageStr + "<img onclick='getChild(this)' src='http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif'/>子节点";
}
else
{
imageObject.src = imageObject.src.replace("http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif","http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif");
for(var i = currentRowIndex+1;i < tableTree.rows.length;i++)
{
if(tableTree.rows[i].getElementsByTagName("img").length > currentRow.getElementsByTagName("img").length)
{
tableTree.deleteRow(i);
--i;
}
else
{
break;
}
}
}
}
</script>
</head>
<body>
<table id="tableTree" style="border:1px solid gray;border-collapse:collapse;width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td><img onclick="getChild(this)" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
</tr>
<tr>
<td><img onclick="getChild(this)" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
</tr>
<tr>
<td><img onclick="getChild(this)" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif"/>顶级节点</td>
</tr>
</table>
</body>
</html>