文档章节

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

RablePHP
 RablePHP
发布于 2015/12/10 17:05
字数 296
阅读 46
收藏 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
code-rhythm:写了个vscode扩展,让代码更有快感

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

onvno_
06/07
0
0
为什么JavaScript是你应当学习的下一个(或第一个)编程语言

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

dentedreality
2014/12/02
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
[JS进阶] 编写可维护性代码

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

赵小宾
2015/04/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
54分钟前
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部