树形列表实现方法

来源：互联网发布：js json数组 remove 编辑：程序博客网时间：2024/06/06 22:53

实现效果图：

显示效果收页面

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <link href="img/css.css" mce_href="img/css.css" type="text/css" rel="stylesheet"> <mce:script src="js/content.js" mce_src="js/content.js"></mce:script> </head> <body bgcolor="#E1F0FF">  <table cellspacing="0" cellpadding="0" width="100%" align="center" bgcolor="#e6e6e6" border="0"> <tr bgcolor="#E1F0FF"><td language="javascript" onmouseup="opencat(cat101005,img101005);" id="item$pval[CatID])" onmouseover="this.bgColor='#A2DBCE';" style="CURSOR: hand" mce_style="CURSOR: hand" onmouseout="this.bgColor='#E1F0FF';" height="24"><img id="img101005" height="20" src="img/class1.gif" mce_src="img/class1.gif" width="20" align="absMiddle" />软件开发</td></tr><tr><%-- 类型树--%><td id="cat101005" style="DISPLAY: none" mce_style="DISPLAY: none" bgcolor="#fefdf5"><img height="20" src="img/class3.gif" mce_src="img/class3.gif" width="36" align="absMiddle" border="0" alt="" /><a target="ParenRight" href="java.jsp" mce_href="java.jsp">java开发</a><br /><img height="20" src="img/class3.gif" mce_src="img/class3.gif" width="36" align="absMiddle" border="0" alt="" /><a target="mainFrame" href="android.jsp" mce_href="android.jsp">android开发</a><br /></td></tr></table> </body></html>

用到的脚本css

BODY{background-image: url(../Images/bg_1.gif);scrollbar-face-color: #C0C0C0;scrollbar-highlight-color: #C0C0C0;scrollbar-shadow-color: #C0C0C0;scrollbar-3dlight-color: #E0E0E0;scrollbar-arrow-color: #333333;scrollbar-track-color: #E0E0E0;background-position: center;}td{font-size:9pt;line-height:120%;color:#353535} body{font-size:9pt;line-height:120%} a:link { color: #000000; text-decoration: none }a:visited { color: #000000; text-decoration: none }a:active { color: #000000; text-decoration: none }a:hover { color: #0099cc; text-decoration: none; position: relative; right: 0px; top: 0px }.table-Line {border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #cccccc;border-right-width: 1px;border-right-style: dotted;border-right-color: #cccccc;}.table-z {border-left-width: 1px;border-left-style: dotted;border-left-color: #cccccc;border-top-width: 1px;order-top-style: dotted;border-top-color: #cccccc;border-top-style: dotted;}

用到的脚本js