如果您对HTML比较熟悉的话,相信您对其中的DIV定位标记一定不会陌生吧?其实明细表就是一个隐藏的DIV,它其实是在一开始就存在的,只不过被隐藏了而已。当我们点击主表中的某个特定标志的时候,就通过某个事件(如click
)将它的状态置为显示就可以了。
好了,原理您已经清楚了,那么到底如何实现呢?接下来我们先设计好表格,从上面我们知道,首先应该设计好主表的表格,并且明细表的表格应该是包含在主表的某个单元格中的,这样才能达到很好的效果。而建立表格的代码,应该是包含在循环读出数据表中多个记录的过程中的,不然就没有意议了。在显示主表记录的时候,我们应该创建一个 DIV 标记(每个标记都应该有个唯一的 id 标识),用以响应事件,如:
每显示完一条主表记录,我们就应该读取相关的明细表记录,并且用另一个 DIV 标记把所有相关的明细记录循环显示并包含起来。结合上面的过程,我们有了以下语句:
可以看出,用 Javascript+DIV 的方式实现明细表简单而高效,界面效果也很容易让用户接受。
好了,原理您已经清楚了,那么到底如何实现呢?接下来我们先设计好表格,从上面我们知道,首先应该设计好主表的表格,并且明细表的表格应该是包含在主表的某个单元格中的,这样才能达到很好的效果。而建立表格的代码,应该是包含在循环读出数据表中多个记录的过程中的,不然就没有意议了。在显示主表记录的时候,我们应该创建一个 DIV 标记(每个标记都应该有个唯一的 id 标识),用以响应事件,如:
<
%
j = 1
do while not rs.eof
% >
< tr >
' 定义一个id为main1、main2序列的DIV标记
< div id = " main < % = j% >" class = “menu” width = “ 100 %” >
' 让编号响应单击事件
< td height = “ 22 ” >< a href = # title = “点击这里展开 / 折叠” onclick = “expandIt( " &j& " );return false ” >< % = rs( " id " )% ></ a ></ td >
</ div >
' ……
</ tr >
< %
j = j + 1
rs.movenext
loop
% >
j = 1
do while not rs.eof
% >
< tr >
' 定义一个id为main1、main2序列的DIV标记
< div id = " main < % = j% >" class = “menu” width = “ 100 %” >
' 让编号响应单击事件
< td height = “ 22 ” >< a href = # title = “点击这里展开 / 折叠” onclick = “expandIt( " &j& " );return false ” >< % = rs( " id " )% ></ a ></ td >
</ div >
' ……
</ tr >
< %
j = j + 1
rs.movenext
loop
% >
每显示完一条主表记录,我们就应该读取相关的明细表记录,并且用另一个 DIV 标记把所有相关的明细记录循环显示并包含起来。结合上面的过程,我们有了以下语句:
do
while
not
rs.eof
< tr >
“定义一个id为main1、main2序列,class为menu的DIV标记
< div id = “main " &j& " “ class = “menu” width = “ 100 %” >
' 让编号响应单击事件
< td height = “ 22 ” >< a href = # title = “点击这里展开 / 折叠” onclick = “expandIt( " &j& " );return false ” >< % = rs( " id " )% ></ a ></ td >
</ div >
“……
</ tr >
< tr >< td >
' 定义一个id为page1、page2序列,class为child的DIV标记
< div id = “page " &j& " “ class = “child” >
< table border = “ 1 ” width = “ 100 %” >
' 在这里循环读取明细表记录
</ table >
</ div >
</ td ></ tr >
j = j + 1
rs.movenext
loop
< tr >
“定义一个id为main1、main2序列,class为menu的DIV标记
< div id = “main " &j& " “ class = “menu” width = “ 100 %” >
' 让编号响应单击事件
< td height = “ 22 ” >< a href = # title = “点击这里展开 / 折叠” onclick = “expandIt( " &j& " );return false ” >< % = rs( " id " )% ></ a ></ td >
</ div >
“……
</ tr >
< tr >< td >
' 定义一个id为page1、page2序列,class为child的DIV标记
< div id = “page " &j& " “ class = “child” >
< table border = “ 1 ” width = “ 100 %” >
' 在这里循环读取明细表记录
</ table >
</ div >
</ td ></ tr >
j = j + 1
rs.movenext
loop
设计好了
DIV
标记和表格显示页面后,接下来就用
Javascript
来设计响应事件语句,以达到页面一开始就全部隐藏,单击其中一个
ID
只显示相关的明细记录而隐藏其它无关的明细记录的目的。
function
initIt(){
divCount = document.all.tags( " DIV " );
for (i = 0 ; i < divCount.length; i ++ ) {
obj = divCount(i);
if (obj.className == " child " || obj.className == " child1 " ) obj.style.display = " none " ;
}
}
var priorid = 1000 ;
function expandIt(el) {
divCount = document.all.tags( " DIV " );
for (i = 0 ; i < divCount.length; i ++ ) {
obj = divCount(i);
if (obj.className == " child " || obj.className == " child1 " )
if (priorid != el){
obj.style.display = " none " ;}
}
priorid = el;
obj2 = eval( " page " + el);
obj4 = eval( " main " + el);
if (obj2.style.display == " none " ) {
obj2.style.display = " block " ;
}
else {
obj2.style.display = " none " ;
}
}
onload = initIt;
divCount = document.all.tags( " DIV " );
for (i = 0 ; i < divCount.length; i ++ ) {
obj = divCount(i);
if (obj.className == " child " || obj.className == " child1 " ) obj.style.display = " none " ;
}
}
var priorid = 1000 ;
function expandIt(el) {
divCount = document.all.tags( " DIV " );
for (i = 0 ; i < divCount.length; i ++ ) {
obj = divCount(i);
if (obj.className == " child " || obj.className == " child1 " )
if (priorid != el){
obj.style.display = " none " ;}
}
priorid = el;
obj2 = eval( " page " + el);
obj4 = eval( " main " + el);
if (obj2.style.display == " none " ) {
obj2.style.display = " block " ;
}
else {
obj2.style.display = " none " ;
}
}
onload = initIt;
以上
Javascript
的具体语法意思我就不详述的,
initIt
函数的功能是在页面加载或刷新的时候全部隐藏明细表,
expandIt
函数的功能是显示相关的明细表而将其它无关的明细表隐藏。
可以看出,用 Javascript+DIV 的方式实现明细表简单而高效,界面效果也很容易让用户接受。