<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"" />
<style>
.MENU1_FOLDER {
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 0px;
vertical-align: middle;
}
.MENU1_FILE {
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 0px;
vertical-align: middle;
}
.MENU2_FOLDER {
margin-left: 17px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}
.MENU2_FILE {
margin-left: 30px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}
.MENU3_FOLDER {
margin-left: 17px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}
.MENU3_FILE {
margin-left: 30px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
}
.FOLDER_PIC {
cursor: pointer;
}
</style>
<script language="javascript" type="text/javascript">
function toggleFolder(objId){
var folderObj = document.getElementById(objId + "_FOLDER_PIC");
var childObj = document.getElementById(objId + "_CHILD");
if(childObj.style.display == "none"){
childObj.style.display = "block";
folderObj.src = "folder_open.gif";
}
else{
childObj.style.display = "none";
folderObj.src = "folder_close.gif";
}
}
</script>
</head>
<body>
<div id="M2_FOLDER_PIC" class="MENU1_FOLDER" >
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img id="M1_FOLDER_PIC" src="folder_close.gif" width="9" height="9" class="FOLDER_PIC" onClick="toggleFolder('M2')"/></td>
<td><img src="folder.gif" width="15" height="12"/></td>
<td nowrap="nowrap">1个树</td>
</tr>
</table>
<div id="M2_CHILD" style="display:none;">
<div class="MENU2_FOLDER">
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img id="M2_1_FOLDER_PIC" src="folder_close.gif" width="9" height="9" class="FOLDER_PIC" onClick="toggleFolder('M2_1')" /></td>
<td><img src="folder.gif" width="15" height="12"/></td>
<td nowrap="nowrap">2个树</td>
</tr>
</table>
<div id="M2_1_CHILD" style="display:none;">
<div class="MENU3_FOLDER">
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img src="file.gif" width="14" height="12"/></td>
<td nowrap="nowrap"><a href=#" class="MENU">33</a></td>
</tr>
</table>
</div>
</div>
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img id="M2_2_FOLDER_PIC" src="folder_close.gif" width="9" height="9" class="FOLDER_PIC" onClick="toggleFolder('M2_2')" /></td>
<td><img src="folder.gif" width="15" height="12"/></td>
<td nowrap="nowrap">3个树</td>
</tr>
</table>
<div id="M2_2_CHILD" style="display:none;">
<div class="MENU3_FOLDER">
<table border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td><img src="file.gif" width="14" height="12"/></td>
<td nowrap="nowrap"><a href=#" class="MENU">44</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
树形结构在LabVIEW中通常以"Tree Control"的形式出现，它是一个用户界面组件，可以展示多级节点，每个节点可以有子节点。这种结构适用于组织和访问复杂的数据结构，如配置文件、目录结构或设备层次。 2. **INI ...
这个文件可能是一个简单的JSP页面，它使用JavaScript和HTML来展示一个树形结构。分析这个文件可以帮助我们理解具体实现细节，如数据结构、DOM操作以及交互逻辑。 总的来说，JavaScript实现的树形结构不仅能够提供...
在菜单树形结构中，每个节点通常代表一个菜单项，而边则表示父节点与子节点之间的层级关系。这种结构有助于用户直观地理解和操作复杂的菜单系统，特别适用于网站或应用程序的导航菜单。 多级树形结构则是指树形结构...
在这个主题中，我们将深入探讨一个使用JavaScript实现的简单树形结构源代码。 首先，我们需要理解树的基本概念。一棵树由节点（也称为顶点）和边组成，每个节点可以有零个或多个子节点，除了根节点，其他节点都有且...
本节我们将深入探讨如何实现一个简单的树形结构，并将其应用于网站后台管理。 首先，我们需要理解树形结构的基本概念。树形结构是一种非线性的数据结构，它由节点（或称为顶点）和边构成，每个节点可以有零个或多...
这种方法主要是通过HTML和CSS来创建一个静态的树形结构。每个节点是一个HTML元素（如`<li>`），而子节点则嵌套在父节点内。通过CSS控制展开和折叠的效果，例如使用`display:none`和`display:block`来隐藏或显示子...
JavaScript中的树形结构是一种数据结构，它模仿了自然界中的树，由节点（也称为顶点）和边（连接节点的线）组成。在JS中，树形结构常用于表示层次关系，例如文件系统、组织结构或者HTML DOM。下面将详细讨论如何在...
这个项目“JSP+Mysql实现的简单树形结构”就是一个典型的例子，它结合了Java服务器页面（JSP）和MySQL数据库来创建一个直观的数据展示方式。以下是关于这个项目的详细知识点： 1. **JSP（Java Server Pages）**：...
总的来说，Treepad以其独特的树形结构和丰富的功能，为信息管理和项目组织提供了一个直观且高效的平台，无论是专业人士还是普通用户，都能从中受益。通过熟练掌握和运用Treepad，我们可以更好地管理和利用日常的信息...
但是最近公司需要做一个带复选框的树形结构，并且最关键的是要嵌入到JSP页面中，传递的数据不是用JSON传递的，是直接通过后端跳JSP页面的方式来的，所以就没有用网上的插件，就自己写了一下简单的实现。
在IT领域，特别是编程中，树形结构是一种重要的数据组织方式，它广泛应用于各种场景，如文件系统、数据库索引、计算机科学中的搜索算法等。PHP作为一种常用的服务器端脚本语言，同样支持对树形结构的处理。在这个...
在C#中实现树形结构时，我们通常会创建一个类来表示节点，该类包含数据以及指向其子节点的引用。以下是一个简单的树节点类的示例： ```csharp public class TreeNode { public T Value { get; set; } public List...
在这个场景中，我们将探讨如何使用C#语言来实现一个控制台应用，它能用递归方法显示一个类似于图书类别的树形结构。 首先，我们需要理解什么是递归。递归是一种解决问题的方法，它通过调用自身来解决子问题，直到...
创建一个基本的树形结构首先需要定义节点数据。这些数据可以是JSON对象，包含节点的ID、文本、父节点ID等属性。例如： ```javascript var treeData = [ { id: '1', text: '节点1', children: [{ id: '1.1', text...
"tree.js" 是一个专门用于构建和操作树形结构的JavaScript库，广泛应用于组织结构、文件系统、菜单导航等场景。下面将详细介绍tree.js及其相关知识点。 1. **树形结构基础**： 树形结构是一种非线性的数据结构，由...
下面是一个简单的JavaScript函数示例，演示了如何将扁平化的数据转换为树形结构： ```javascript function flatDataToTree(flatData, idField, parentField) { const nodeMap = {}; const tree = []; // 构建...
html 树形结构 简单实现
"js实现树形结构"是一个常见的需求，特别是在数据管理和展示时，例如文件系统、组织架构或菜单导航。本知识点将深入探讨如何使用JavaScript实现树形结构，并提供相关资源。 树形结构是一种数据结构，它表示了对象...
5. **递归加载**：为了支持任意深度的树形结构，我们需要实现一个递归函数，用于加载所有子节点。在初始化或展开节点时，调用此函数，递归地加载子节点直到没有子节点为止。 6. **优化性能**：为了提高性能，避免一...
BootstrapTreeView 是一个基于流行的前端框架 Bootstrap 的树形结构插件，它允许开发者在网页上创建交互式的、可自定义的树形视图。这个插件主要用于数据组织和展示，常见于网站导航、文件目录结构、组织架构或者...