文档章节

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

RablePHP
 RablePHP
发布于 2015/12/10 17:05
字数 296
阅读 47
收藏 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
巴南
程序员
私信 提问
10 个你需要了解的最佳 javascript 开发实践

原文:Top 10 “Must Follow” JavaScript Best Practices Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。 尽管很多的开发人员...

justjavac
2013/10/15
679
1
为什么JavaScript是你应当学习的下一个(或第一个)编程语言

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

dentedreality
2014/12/02
0
0
「译」在 javascript 中,为什么 [1,2] + [3,4] 不等于 [1,2,3,4]?

在 stackoverflow 上有人提问:arrays - Why does [1,2] + [3,4] = "1,23,4" in JavaScript? 中文翻译:在 javascript 中,为什么 [1,2] + [3,4] 不等于 [1,2,3,4]? 问题 我想将一个数组追加...

justjavac
2012/12/20
353
1
精心收集的 95 个超实用的 JavaScript 代码片段( ES6+ 编写)

目录 Array 数组 Array concatenation (数组拼接) Array difference (数组比较) Array includes (数组包含) Array intersection (数组交集) Array remove (移除数组中的元素) Array sample ......

大灰狼的小绵羊哥哥
11/13
0
0
最大限度利用 JavaScript 和 Ajax 性能

简介 在 web 早期,优化 web 页面的性能通常意味着避免了使用不必要的 HTML 标记,将 JavaScript 代码量控制到最小,并尽量减小所有图片文件大小,否则上网冲浪者会走开去泡杯咖啡来等待页面...

IBMdW
2011/08/08
2.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript 继承使用解析

继承,通俗地说,之前你写过一些类,这些类中有一些是而你现在要写的类的功能的子集或者基本相同,那么你不用完全重新写一个新的类,你可以把之前写的类拿过来使用.这样的一种代码重用过程就叫做继...

前端攻城小牛
17分钟前
0
0
深入解析JavaScript 原型继承

JavaScript 原型继承,学习js面向对象的朋友可以看看。十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 Object.prototype JavaScript是...

前端攻城老湿
19分钟前
0
0
2018阿里云双12——年末钜惠,低至2折

活动链接地址:https://m.aliyun.com/act/team1212/?params=N.JlJCGqQNL4

城市之雾
20分钟前
0
0
VMware前路难测,多个厂家群雄逐鹿

导读 以VMware为例,虚拟机巨头公布了第二财季报告所示,它第二财季收入同比增长13%,达到了21.7亿美元,而且该公司收入和每股收益均超出预期。 在人们高谈Salesforce、亚马逊等新兴云计算厂...

问题终结者
21分钟前
0
0
Vuex的初探与实战小结

1.概述 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响...

peakedness丶
31分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部