1.概述
对于一个导航文字很多，并且可以对导航内容进行分类的网站来说，可以将页面中的导航文字以树状图的形式显示，树状图的导航菜单在实际开发应用中非常多。应用它可以方便用户查看。运行本实例，如图1所示，单击节点名称前的加号“+”可以展开指定的节点，单击减号“—”可以收缩子节点。
2.技术要点
本实例主要是通过JavaScript控制表格行的<tr>标签的显示或隐藏来实现节点的显示和隐藏。控制<tr>标签的显示和隐藏，主要是在JavaScript中控制<tr>标签对象的display属性来实现。display属性前面已经介绍过，所以此处不再赘述。
3.具体实现
（1）利用JavaScript定义一个函数ShowTR()，用于显示或隐藏表格中指定行的内容。关键代码如下：
（1）利用JavaScript定义一个函数ShowTR()，用于显示或隐藏表格中指定行的内容。关键代码如下： function ShowTR(objImg,objTr){ if(objTr.style.display == ""){ //折叠展开的节点 objTr.style.display = "none"; objImg.src = "images/jia.gif"; //改变图标 objImg.alt = "展开"; //设置工具提示为“展开” }else{ //展开折叠的节点 objTr.style.display = ""; objImg.src = "images/jian.gif"; //改变图标 objImg.alt = "折叠"; //设置工具提示为“折叠” } }
（2）为了实现在默认情况下第1节点为展开状态，可以在该函数后面加入以下代码，用于当第1个节点包括子节点时，设置第1个节点为展开状态，关键代码如下：
<%
if(m>1) //设置第1个节点为展开状态
out.println("<script language='javascript'>ShowTR(img1,OpenRep1) //设置第1个节点为展开状态</script>");
%>
（3）从视图V_Type中查询商品的分类信息。关键代码如下：
<% ConnDB conn=new ConnDB(); ResultSet rs_superType=conn.executeQuery("select ID,superType from V_Type group by ID,superType order by superType desc"); %>
（4）循环显示商品分类信息，并查询各分类中所包括的子类名称，如果该分类有相对应的子类，则在节点前显示加号“+”，否则显示减号“—”。注意：需要为每个包含子节点的节点设置超链接，该超链接执行的操作时调用自定义的JavaScript函数showTR()，实现节点的展开与折叠。关键代码如下：
<table width="100%" height="40" border="0" cellpadding="0" cellspacing="0">
<%
int ID_superType=0;
String superType="";
int m=1;
while(rs_superType.next()){
ID_superType=rs_superType.getInt(1);
superType=rs_superType.getString(2);
String sql="select * from V_Type where ID="+ID_superType;
ResultSet rs_subType=conn.executeQuery(sql);
String subType="";
int subID=0;
//获取记录总数
rs_subType.last();
int subType_RC=rs_subType.getRow();
rs_subType.first();
%>
<tr>
<td>
<%if(subType_RC<=0){%>
<img src="images/jian_null.gif" width="38" height="16" border="0">
<%=superType%>
<%}else{%>
<a href="Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)">
<img src="images/jia.gif" border="0" alt="展开" id="img<%=m%>">
</a>
<a href="Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)"><%=superType%></a>
<%}%>
</td>
<%if (subType_RC>0){%>
<tr id="OpenRep<%=m%>" style="display:none;">
<td colspan="6">
<%do{
subType=rs_subType.getString(3);
subID=rs_subType.getInt(4);
%>
<table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td height="25" align="center">
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr onMouseOver="this.style.background='#EEEEEE'"
onMouseOut="this.style.background=''">
<td width="15%"> </td>
<td width="10%" align="center">
<img src="images/folder.gif" width="16" height="16" border="0">
</td>
<td width="75%"><a href="#"><%=subType%></a></td>
</tr>
</table>
</td>
</tr>
</table>
<% m++; //注意，该条语句一定不能少
}while(rs_subType.next());
%>
</td>
<%}%>
</tr>
<%}%>
</table>