一棵用JAVASCRIPT实现的可无限扩展的树

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量1.5k 收藏
点赞数
文章标签： javascript function border url class table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyd841122/article/details/2112718
版权

其中browse.gif为叶节点标记，minus.gif为展开后的枝节点标记，plus.gif为展开前的枝节点标记（图片就略了）

<%@ page language="java" pageEncoding="UTF-8"%>
<html>

<head>
<title>无限级树形菜单</title>
<style>
#A1 td { vertical-align: middle; }
#A1 td.bj { font-family: Wingdings; color: GREEN; text-align: center; }
#A1 td.bj , #A1 td.kg { width: 24; }
#A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; }
#A1 a:hover { color: #0ff080; text-decoration: none; }
a{text-decoration:none;}
</style>

<script language="JavaScript">

function treeClass(id)
{
this.id = id;
this.HTMLdata = "";

this.start = function() //菜单开始
{
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0" width="100%" id="'+this.id+'">';
}

this.end = function() //菜单结束
{
this.HTMLdata += '</table>';
}


this.m_start = function(name,url,tt) //菜单组开始
{
this.HTMLdata += '<tr><td class="bj"><img src="'+(tt==1?'images/minus.gif':'images/plus.gif')+'" id="'+(tt==1?'1':'0')+'" title="'+(tt==1?'点击折叠':'点击展开')+'" οnclick="zgmm()"></td>';
this.HTMLdata += '<td><a href="'+url+'">'+name+'</a></td>';
this.HTMLdata += '</tr>';
this.HTMLdata += '<tr style="display: '+(tt==1?'block':'none')+';">';
this.HTMLdata += '<td class="bj"> </td>';
this.HTMLdata += '<td>';
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0">';
}

this.m_end = function() //菜单组结束
{
this.HTMLdata += '</table></td></tr>';
}

this.add_Sub = function(name,url,kj) //添加菜单项
{
this.HTMLdata += '<tr><td class="bj"><img src="images/browse.gif"></td><td>';
this.HTMLdata += '<a target="'+kj+'" href="'+url+'">'+name+'</a>';
this.HTMLdata += '</td></tr>';
}

this.print = function() //输出菜单
{
document.write(this.HTMLdata);
}
}

//点击后的处理
function zgmm()
{
var ero = event.srcElement;
var mo = event.srcElement.parentElement.parentElement.nextSibling;
mo.style.display = (mo.style.display=="none")?"block":"none";
if(ero.id==0){
ero.src = "images/minus.gif";
ero.title = "点击折叠";
ero.id=1;
}else if(ero.id==1){
ero.src = "images/plus.gif";
ero.title = "点击展开";
ero.id=0;
}
}
</script>
</head>

<body>
<script language="JavaScript">
// 说明：
// 菜单组开始，m_start(name,tt); name为菜单组名称，tt为1菜单组初始时展开，为0不展开
// 菜单组结束：m_end();
// 添加菜单项：add_Sub("菜单项名称","url地址","框架名");

var tObj = new treeClass("A1")
tObj.start();
tObj.m_start("贵州省","src/guizhou.html","1");
tObj.m_start("贵阳市","src/guiyang.html",0);
tObj.m_start("花溪区","src/huaxi.html",0);
tObj.m_start("花溪局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("花溪局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("金牛区","src/huaxi.html",0);
tObj.m_start("金牛局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("六盘水市","src/guiyang.html",0);
tObj.m_start("六盘区","src/huaxi.html",0);
tObj.m_start("六盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("六盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("七盘区","src/huaxi.html",0);
tObj.m_start("七盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("七盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("遵义市","src/guiyang.html",0);
tObj.m_start("革命区","src/huaxi.html",0);
tObj.m_start("革命局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("革命局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("上沿区","src/huaxi.html",0);
tObj.m_start("上沿局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("上沿局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("安顺市","src/guiyang.html",0);
tObj.m_start("安顺区","src/huaxi.html",0);
tObj.m_start("安顺局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("安顺局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("青阳区","src/huaxi.html",0);
tObj.m_start("青阳局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("青阳局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("铜仁市","src/guiyang.html",0);
tObj.m_start("铜仁区","src/huaxi.html",0);
tObj.m_start("铜仁局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("铜仁局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("毕节市","src/guiyang.html",0);
tObj.m_start("节日区","src/huaxi.html",0);
tObj.m_start("节日局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("节日局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_start("黔南州","src/guiyang.html",0);
tObj.m_start("迁徙区","src/huaxi.html",0);
tObj.m_start("迁徙局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("迁徙局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();

tObj.m_end();


tObj.end();
tObj.print();

</script>

</body>

</html> 

yyd841122
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现无限级递归树的示例代码
10-17
主要介绍了JavaScript实现无限级递归树的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用html+css+js实现一个无限级树形控件
热门推荐
cc_fys的博客
07-30 2万+
题目描述： 用html+css+js实现一个无限级树形控件，功能如下： 1.利用html、css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消，点击叶节点勾选图标可以选中或取消   思路： 以上是一道题的题目描述，但是树形结构是如何给出的题目并没有说明，所以每个人都有不同的想法。（自己百度了一顿也没有百度到  (⊙⊙) ） 想法： 1、假如给...
无限极二叉树，数据结构，经典算法
bing8181413的专栏
09-03 3174
利用多叉树实现Ext JS中的无限级树形菜单（一种构建多级有序树形结构JSON的方法）                                                      一、问题研究的背景和意义 目前在Web应用程序开发领域，Ext JS框架已经逐渐被广泛使用，它是富客户端开发中出类拔萃的框架之一。在Ext的UI控件中，树形控件无疑是最为常用的控件之一，它用来实
VUE elementui mysql 实现无限可拓展的树形表格
weixin_60068942的博客
10-20 559
无限可拓展的树形表格
uniapp小程序实现无限层级的树形数据结构
qq_45750213的博客
08-16 969
在uniapp中由于没有封装好的树形组件，只能自己纯手写实现。树形结构是无限层级的，所以想到了递归，使用组件循环技术实现。
用javascript实现div可编辑的常见方法
10-30
用javascript实现div可编辑的常见方法
用javascript实现的不错的一款网页选项卡
10-30
用javascript实现的不错的一款网页选项卡
用JavaScript实现字符串切分功能
10-31
用JavaScript实现字符串切分功能
用JavaScript实现仿Windows关机效果
10-31
用JavaScript实现仿Windows关机效果
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 864
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 918
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 988
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 376
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 305
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
redux快速入门
qq_73270720的博客
04-29 341
简单的加减案例,学会redux快速入门
虚拟dom直接用JavaScript实现了DOM树
07-17
是的，虚拟DOM是一种用JavaScript对象来模拟真实DOM树的概念。通过使用虚拟DOM，在内存中创建一个轻量级的DOM树副本，然后通过比较虚拟DOM树和真实DOM树之间的差异，最小化对真实DOM的操作，从而提高性能。 虚拟DOM...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值