文档章节

JS 用JS编写一个数组的树节点

RablePHP
 RablePHP
发布于 2015/12/10 17:05
字数 296
阅读 45
收藏 2

------------------index,html---------------

<<!DOCTYPE html>
<html>
<head>
 <title>JS固定节点</title>
 <script type="text/javascript" src="jie.js"></script>
</head>
<body>
<div id="fass" ></div>
<iframe name="Iframe1" width="500" height="500"></iframe>
</body>
</html>

 

 

--------------------------jie.js------------------------

var data=[
['1','父节点1','0'],
['2','父节点2','0'],
['3','百度','1',"http://www.baidu.com"],
['4','搜搜','1',"http://www.soso.com"],
['5','节点3','2',"http://www.baidu.com"],
['6','节点3','1',"http://www.baidu.com"],
['7','节点213123','2',"http://www.baidu.com"],
['8','白先有','2',"http://www.soso.com/wx"],
];


var html="";//全局变量

window.onload=function function_name() {
 
 //首先遍历 数组。找到第一个父节点
 for (var i = 0; i < data.length; i++) {
  
  //判断条件 是否是父节点
  if(data[i][2]==0)
  {
   //将组织 HTML  输出父节点
   html+="<a href='javascript:'>+"+data[i][1]+"</a><br>";
   document.getElementById("fass").innerHTML=html;

   //将父节点的 ID 临时储存
   var faid=data[i][0]; //局部变量 这次用完就没用了

   //再一次遍历数组。找到 该ID下的子节点
   for (var n = 0; n < data.length; n++) {
    
    //该父节点ID 下的子节点
    if(data[n][2]==faid)
    {
     html=html+"<a target='Iframe1' href='"+data[n][3]+"'>——"+data[n][1]+"</a><br>"
     document.getElementById("fass").innerHTML=html;
     //console.log("-"+data[n][1]);
    }
   }
  }
 }
}

 

----------------------------------讲解----------------------------

这个只是一个简单的树节点实现。希望能自己优化和改进,并且封装之后使用。

© 著作权归作者所有

共有 人打赏支持
RablePHP
粉丝 15
博文 47
码字总数 11895
作品 0
巴南
程序员
【JSConf EU 2018】JavaScript引擎: 精粹部分

JSConf EU 2018圆满结束, 谷歌V8的开发者Mathias Bynens以及Benedikt Meurer一起发表了《JavaScript Engines: The Good Parts™》演讲,本文将带领大家回顾一下演讲上所提到的重点。 演讲第一...

想成为工匠的码农
06/19
0
0
为什么JavaScript是你应当学习的下一个(或第一个)编程语言

原文出处:dentedreality 译文出处:腊八粥 本文是翻译,版权归原作者所有 我已经被多次问到,如果我刚刚开始,我应当学习什么编程语言,答案一定是JavaScript,下面是为什么: 最简单的开发...

dentedreality
2014/12/02
0
0
code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_
06/07
0
0
[JS进阶] 编写可维护性代码

1 可维护性代码的特点 可理解性:其他人可以接手代码并理解它的意图,无需原开发人员花太多时间解释! 直观性:代码中的东西一看就能明白,尽管其操作过程复杂。 可适应性:代码以一种数据上...

赵小宾
2015/04/01
0
0
AJAX基础之JavaScript基础与增强(一)

一、什么是JavaScript   JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现...

architect刘源源
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

arts-week5

Algorithm 824. Goat Latin - LeetCode 152. Maximum Product Subarray - LeetCode 110. Balanced Binary Tree - LeetCode 67. Two Sum II - Input array is sorted - LeetCode 665. Non-dec......

yysue
21分钟前
0
0
iOS开发之AddressBook框架详解

iOS开发之AddressBook框架详解 一、写在前面 首先,AddressBook框架是一个已经过时的框架,iOS9之后官方提供了Contacts框架来进行用户通讯录相关操作。尽管如此,AddressBook框架依然是一个非...

珲少
51分钟前
1
0
两年摸爬滚打 Spring Boot,总结了这 16 条最佳实践

Spring Boot是最流行的用于开发微服务的Java框架。在本文中,我将与你分享自2016年以来我在专业开发中使用Spring Boot所采用的最佳实践。这些内容是基于我的个人经验和一些熟知的Spring Boot...

Java填坑之路
今天
4
0
《Spring5学习》04 - 面向切面编程

一、Spring面向切面编程的基本概念 面向切面编程(即AOP):把项目中需要再多处使用的功能比如日志、安全和事务等集中到一个类中处理,而不用在每个需要用到该功能的地方显式调用。 横切关注...

老韭菜
今天
2
0
day61-20180819-流利阅读笔记

跑道没了,它们还在跑:澳门赛狗业的遗孤 Daniel 2018-08-19 1.今日导读 相信你早就知道香港有个赛马会,可是你听说过香港的邻居澳门原本有个赛狗会吗?其实,对于澳门人来说,赛狗这项活动历...

aibinxiao
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部