`

创建目录树的js

阅读更多
<!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=gb2312" />
<title>wiki编辑器</title>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}

function addRoot(id)
{
var root = document.createElement("div");
root.id = id;
root.innerHTML = "根节点标题 <a href=\"javascript:addNode('node')\">创建节点</a>";
document.body.appendChild(root);
}

function addNode(id)
{
var obj = $(id);
var depth = id.split(".").length;
var margin = "";
for(var i = 0; i < depth; i++)
{
   margin += "  ";
}
var idtemp = obj.id + ".1";
var number = 1;
while($(idtemp))
{
   number++;
   idtemp = obj.id + "." + number;
}

var Node = document.createElement("div");
Node.id = idtemp;

Node.innerHTML = margin + Node.id.substring(5) + ". 子目录标题 <a href=\"javascript:addNode('" + Node.id + "')\">创建节点</a>";
obj.appendChild(Node);
}

</script>
</head>
<body>
<div id="Edit"><a href="javascript:addRoot('node')">创建目录</a>
</div>

</body>
</html>

 

  • 描述: 效果圖
  • 大小: 43.8 KB
分享到:
评论

相关推荐

    js动态目录树,像windows目录树一样,很方便的。

    在IT领域,尤其是在Web开发中,创建动态的、交互式的目录树结构是常见的需求,它可以帮助用户更好地管理和浏览多层级的数据。"js动态目录树"就是这样一个解决方案,它模仿了Windows操作系统中的文件系统目录树视图,...

    目录树 常见JS目录树插件

    JavaScript(JS)作为一种广泛使用的客户端脚本语言,提供了多种库和插件来实现交互式的目录树视图。本文将详细介绍几种常见的JS目录树插件及其特点。 1. **jQuery Tree** jQuery Tree是一款基于jQuery的目录树...

    javascript实现的目录树

    总的来说,创建一个JavaScript实现的目录树涉及数据结构设计、HTML和CSS渲染、事件处理、性能优化以及可访问性等多个方面。通过学习和实践这些技术,开发者可以构建出功能强大且美观的目录树视图,适用于各种应用...

    一个漂亮的目录树代码(JS版)

    这个“一个漂亮的目录树代码(JS版)”是一个JavaScript实现的目录树组件,它可以帮助开发者创建美观且交互性强的文件或目录结构。下面我们将深入探讨这个话题。 首先,目录树是一种以树形结构展示文件系统或逻辑...

    原生js实现无限目录树.zip

    在压缩包内的“原生js实现无限目录树”文件中,我们可以找到相关的代码实现和示例,进一步学习和理解如何用原生JavaScript实现这两种无限目录树加载方式。通过研究这些代码,开发者可以掌握构建高效、交互友好的目录...

    Js Tree JS目录树

    JS Tree 是一个基于JavaScript的库,专门用于在Web页面上创建交互式的目录树结构,这种结构类似于Windows操作系统中的文件夹树,能够帮助用户以层级方式浏览和操作数据。 目录树在Web应用中有很多用途,例如: 1. ...

    JS树 集合 目录树 二十多个

    在本资源包中,你将找到二十多种不同的JS目录树实现,这些实现涵盖了各种功能和样式,可以满足不同场景下的需求。 目录树(Directory Tree)是一种数据结构,它以树状的形式展示文件系统或者逻辑结构。在网页中,...

    JS做的简单目录树

    在JavaScript(JS)中创建一个简单的目录树是一个常见的需求,特别是在网页应用中为了展示层级结构的数据。本项目提供了一个实现这一功能的实例,利用CSS样式和JavaScript动态效果,使目录树更加直观易用。以下是对...

    tree12-30.rar_目录树_目录树 java语言_目录树 js

    本文将详细讨论如何使用Java语言和JavaScript(JS)来实现这一功能,基于提供的标题"tree12-30.rar_目录树_目录树 java语言_目录树 js"和描述"自己修改成功的java代码+js动态生成目录树结构"。 首先,让我们深入...

    js写的目录树

    JavaScript编写的目录树是一种在网页上展示文件系统或者项目结构的常见方式,它通常用于文件管理、代码编辑器、项目导航等场景。这种目录树利用HTML、CSS和JavaScript技术实现,能够动态地展开和折叠节点,使用户...

    带复选框的JS目录树

    在JavaScript(JS)开发中,实现带复选框的目录树是一种常见的需求,尤其是在构建具有层级结构的数据展示或管理界面时。这样的功能可以用于文件管理系统、网站导航菜单、权限设置等场景。本节将深入探讨如何使用...

    js 实现的Tree目录树

    在本案例中,"js 实现的Tree目录树"指的是利用JavaScript来创建一种数据结构——树形目录,这种结构常用于文件系统、组织数据或者构建用户界面,尤其是文件管理器等应用场景。 树形目录结构是一种模仿自然界中树的...

    AlaiJSCtr.rar_目录树_目录树 js

    "AlaiJSCtr.rar"这个压缩包显然包含了与JavaScript相关的代码或项目,特别是关于“目录树”的实现。目录树,或者叫做文件系统树,是计算机科学中一种用于表示文件和文件夹层次结构的图形化方式,常用于文件管理器或...

    磁盘目录树(EXT-js)

    【磁盘目录树(EXT-js)】是一种使用EXT-js库构建的前端应用,它主要用于在Web界面中展示计算机硬盘上的目录结构,使用户能够像在操作...通过深入学习EXT-js的文档和实践,可以创建出更加复杂和个性化的目录树应用。

    javascript目录树

    在这个“javascript目录树”压缩包中,可能包含了一个JavaScript库或者一组脚本,用于创建和管理这种交互式的树形视图。 在JavaScript中实现目录树,主要涉及到以下几个关键知识点: 1. **数据结构**:目录树本质...

    树目录JS .rar javascript

    在JavaScript编程领域中,"树目录JS"是一个用于在网页中构建和操作树形目录结构的库或技术。树目录通常被用在文件管理系统、网站导航、数据展示等多个场景,因为它们能有效地组织和呈现层次化的信息。在这个压缩包...

    JavaScript Dtree 最经典的JS目录树

    JavaScript DTree是一种基于JavaScript实现的目录树控件,它在Web应用中被广泛用于展示层次结构数据,如文件系统、组织结构或者网站导航。DTree以其简洁高效、可定制化的特点,深受开发者喜爱。在这个话题中,我们将...

    jstree目录树控件

    总结来说,jsTree是一个功能强大的JavaScript目录树控件,适用于各种需要展示层级关系的场景。其动态加载、丰富的插件支持和高度的自定义能力,使其在Web开发中备受欢迎。通过熟练掌握jsTree的使用,开发者可以构建...

    功能强大的动态目录树

    "功能强大的动态目录树"这个标题暗示我们讨论的是一个能够实现高效、灵活操作的JavaScript(js)实现的目录树组件。这个组件可能包含了增、删、改、查等基本功能,并且可以与数据库进行交互,从而实时更新和存储数据...

    js树,目录树源代码哟

    在这个场景中,"js树"可能指的是用JavaScript实现的树形数据结构的可视化展示,而"目录树"通常是指模拟文件系统的层级结构。 首先,让我们详细了解一下树这种数据结构。在计算机科学中,树是一种非线性的数据结构,...

Global site tag (gtag.js) - Google Analytics