<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="padding:20px">
<style>
* {margin:0;padding:0;font-size:12px}
.table{ border:solid 0px #CCC;border-collapse:collapse;}
.table td,.table th {border-left:solid 1px #CCC;border-right:solid 1px #CCC;border-bottom:solid 1px #CCC;padding:2px; line-height:16px;}
.table th {border-top:solid 1px #CCC; line-height:18px;}
.add{display:block;width:12px;height:9px;background:url(minus.gif) no-repeat;position:absolute;left:-12px;top:2px;}
.add1{display:inline-block;width:12px;height:9px;background:url(plus.gif) no-repeat;position:absolute;left:-12px;top:2px;}
.table tr.odd{background-color:#efefef}
.table tr.even{background-color:#fff}
.tabtree{display:inline-block; padding-left:16px; background:url(treebg.gif) 0 0 repeat-y;}
.tabtree .tabtree_col{position:relative;}
.col1{width:300px;}
.col2{width:300px;}
.col3{width:300px;}
</style>
</script>
<div id="table_tree" class="tabtree">
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<th scope="col" class="col1" >第一列</th>
<th scope="col" class="col2" >第一列</th>
<th scope="col" class="col3">第一列</th>
</tr>
</table>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1" >第一行</td>
<td class="col2" >第一列</td>
<td class="col3" >第一列</td>
</tr>
</table>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第二行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第三行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第四行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第五行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第六行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第七行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第八行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第九行</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第十列</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
</div>
<div class="tabtree_col">
<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td class="col1">第十列</td>
<td class="col2">第一列</td>
<td class="col3">第一列</td>
</tr>
</table>
</div>
</div>
</div>
<script>
function table_tree(id){
var $=function(o){return document.getElementById(o)};
var each=function(arr,fun){
for(var i=0,len=arr.length;i<len;i++) fun(arr[i],i);
}
var parents=function(o,n) {
if (n) {
var tmp = [],arr =parents(o);
each(arr,function(o){
if(o.style.display=="none") {
tmp.push(o);
}
});
return tmp;
}
var P = o.parentNode;
return P.nodeName == 'HTML'? [P] : [P].concat(parents(P));
};
var GC=function(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
var div=GC('tabtree_col',$(id));
each(div,function(o,i){
var div_c=o.childNodes;
var dic_cl=div_c.length;
var s=1;
for(var t=0;t<dic_cl;t++)
{
if(div_c[t].tagName&&div_c[t].tagName.toUpperCase()=="DIV"&&div_c[t].className=='tabtree_col')
{
if(s){
var a=document.createElement("a");
a.className="add1";
a.href="#";
o.appendChild(a);
s=0;
a.onclick=function()
{
var od=this.parentNode.childNodes;
for(var k=0;k<od.length;k++)
{
if(od[k].tagName&&od[k].tagName.toUpperCase()=="DIV"&&od[k].className=='tabtree_col'){
if(od[k].style.display=="none")
{
od[k].style.display=""
}
else od[k].style.display="none";
};
}
if(this.className=="add"){this.className="add add1"}
else this.className="add";
this.blur();
var trz=[];
var trl=$(id).getElementsByTagName('tr');
each(trl,function(o,i){
if(parents(o,1).length==0&&i!=0){trz.push(o)}
});
each(trz,function(o,i){
if((i-1)%2!=0){o.className="even"}
else{o.className="odd"}
});
return false;
}
}
div_c[t].style.display="none";
}
//break;
}
});
}
new table_tree("table_tree");
</script>
</body>
</html>
代码
