JS 用JS编写一个数组的树节点
博客专区 > RablePHP 的博客 > 博客详情
JS 用JS编写一个数组的树节点
RablePHP 发表于2年前
JS 用JS编写一个数组的树节点
  • 发表于 2年前
  • 阅读 40
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

摘要: 树节点

------------------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]);
    }
   }
  }
 }
}

 

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

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

标签: 树节点
共有 人打赏支持
粉丝 15
博文 46
码字总数 11746
×
RablePHP
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: