会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
epan's diary
希望把每一天有意义的信息记录下来,既是分享也是留念。
博客园
首页
新随笔
联系
管理
订阅
树型结构显示
在网页上这样显示
代码如下
<!
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=gb2312"
>
<
title
>
Tree
</
title
>
<
script
language
="javascript"
>
function
show(IMG,DV)
{
if
(DV.style.display
==
"
none
"
)
{
DV.style.display
=
"
block
"
;
IMG.src
=
"
images/btnDel.gif
"
}
else
{
DV.style.display
=
"
none
"
;
IMG.src
=
"
images/btnAdd.gif
"
}
}
var
display
=
"
none
"
;
var
i;
function
showall()
{
var
divTags
=
document.getElementsByTagName(
"
div
"
);
//
alert(divTags[10].id.replace("DV",""));
if
( display
==
"
none
"
)
{
for
(i
=
0
;i
<
divTags.length;i
++
)
{
divTags[i].style.display
=
"
block
"
;
eval(
"
IMG
"
+
divTags[i].id.replace(
"
DV
"
,
""
)).src
=
"
images/btnDel.gif
"
;
display
=
"
block
"
}
}
else
{
for
(i
=
0
;i
<
divTags.length;i
++
)
{
divTags[i].style.display
=
"
none
"
;
eval(
"
IMG
"
+
divTags[i].id.replace(
"
DV
"
,
""
)).src
=
"
images/btnAdd.gif
"
;
display
=
"
none
"
;
}
}
}
</
script
>
</
head
>
<
body
>
<
table
width
="90%"
border
="1"
align
="left"
bordercolorlight
="#cccccc"
bordercolordark
="#ffffff"
cellpadding
="0"
cellspacing
="0"
>
<
tr
ONCLICK
='showall()'
align
="center"
STYLE
='CURSOR:HAND'
onMouseOver
="this.bgColor='#eeeeee'"
onmouseout
="this.bgColor='#ffffff'"
>
<
td
width
="21%"
bgcolor
="#EEEEEE"
>
表头
</
td
>
<
td
width
="23%"
>
123456
</
td
>
<
td
width
="17%"
bgcolor
="#EEEEEE"
>
其他内容
</
td
>
<
td
width
="39%"
>
123456
</
td
>
</
tr
>
</
table
>
<
p
>
</
p
>
<
table
width
="45%"
border
="1"
bordercolorlight
="#cccccc"
bordercolordark
="#ffffff"
cellpadding
="0"
cellspacing
="0"
>
<
tr
align
="center"
ONCLICK
="show(IMG001,DV001)"
STYLE
='CURSOR:HAND'
onMouseOver
="this.bgColor='#eeeeee'"
onmouseout
="this.bgColor='#ffffff'"
>
<
th
width
="2%"
scope
="row"
><
img
id
="IMG001"
src
="images/btnAdd.gif"
></
th
>
<
td
width
="20%"
bgcolor
="#EEEEEE"
>
第一层
</
td
>
<
td
width
="25%"
>
456789
</
td
>
<
td
width
="30%"
>
12
</
td
>
<
td
width
="20%"
>
221
</
td
>
</
tr
>
</
table
>
<!--
Begin of 2
-->
<
DIV
id
='DV001'
style
='display:none'>
<table style
="margin-left: 20px;"
width
="65%"
border
="1"
bordercolorlight
="#cccccc"
bordercolordark
="#ffffff"
cellpadding
="0"
cellspacing
="0"
>
<
tr
align
="center"
ONCLICK
="show(IMG0010,DV0010)"
STYLE
='CURSOR:HAND'
onMouseOver
="this.bgColor='#eeeeee'"
onmouseout
="this.bgColor='#ffffff'"
>
<
td
width
="2%"
><
img
id
="IMG0010"
src
="images/btnAdd.gif"
></
td
>
<
td
width
="10%"
bgcolor
="#EEEEEE"
>
第二层
</
td
>
<
td
width
="10%"
>
132
</
td
>
<
td
width
="8%"
>
12
</
td
>
<
td
width
="20%"
>
</
td
>
<
td
width
="8%"
></
td
>
<
td
width
="20%"
>
</
td
>
<
td
width
="10%"
></
td
>
</
tr
>
</
table
>
<!--
Begin of 3
-->
<
DIV
id
="DV0010"
style
='display:none'>
<table style
="margin-left: 40px;"
width
="75%"
border
="1"
bordercolorlight
="#cccccc"
bordercolordark
="#ffffff"
cellpadding
="0"
cellspacing
="0"
>
<
tr
STYLE
='CURSOR:HAND'
onMouseOver
="this.bgColor='#eeeeee'"
onmouseout
="this.bgColor='#ffffff'"
align
="center"
ONCLICK
='show(IMG00101,DV00101)'>
<td width
="2%"
bgcolor
="#eeeeee"
><
img
id
="IMG00101"
src
="images/btnAdd.gif"
></
td
>
<
td
width
="10%"
bgcolor
="#eeeeee"
>
第三层
</
td
>
<
td
width
="15%"
>
</
td
>
<
td
width
="10%"
>
</
td
>
<
td
width
="10%"
>
</
td
>
<
td
width
="10%"
>
</
td
>
<
td
width
="10%"
>
</
td
>
<
td
width
="10%"
>
</
td
>
<
td
width
="10%"
>
</
td
>
</
tr
>
</
table
>
<!--
Begin of 4
-->
<
DIV
id
='DV00101'
style
='display:none'>
<table style
="margin-left: 60px;"
width
="90%"
border
="1"
bordercolorlight
="#cccccc"
bordercolordark
="#ffffff"
cellpadding
="0"
cellspacing
="0"
>
<
tr
align
="center"
>
<
td
width
="2%"
bgcolor
="#eeeeee"
><
img
id
="IMG001010"
src
="images/btnDel.gif"
></
td
>
<
td
bgcolor
="#eeeeee"
width
="10%"
>
第四层
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
</
table
>
</
DIV
>
<!--
End of 4
-->
</
DIV
>
<!--
End of 3
-->
</
DIV
>
<!--
End of 2
-->
</
body
>
</
html
>
这里给出的是静态网页,还有没有其他更好的方法?
如果是动态的话,如何去分页?
posted @
2005-01-24 18:24
epan
阅读(
3758
) 评论(
4
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告