var jsonData =
[{"subnetId":,"subnetNode":-,"subnetRemark":"状态自带","subnetName":"中心网络"},
{"subnetId":,"subnetNode":,"subnetRemark":"好好的","subnetName":"北京"},
{"subnetId":,"subnetNode":,"subnetRemark":"大唐电信","subnetName":"大唐电信"},
{"subnetId":,"subnetNode":,"subnetRemark":"","subnetName":"上海"},
{"subnetId":,"subnetNode":,"subnetRemark":"","subnetName":"中国联通"},
{"subnetId":,"subnetNode":,"subnetRemark":"","subnetName":"移动"},
{"subnetId":,"subnetNode":,"subnetRemark":"","subnetName":"你好"}];

有数组如上,用递归的方式实现一下效果,

subnetId与subnetNode相等时,subnetId作为父节点,subnetNode作为子节点

 function show(data,node){
var ul = "<ul>";
for(var i=;i<data.length;i++){
if(data[i]!=null){
if(data[i].subnetNode==node){
ul += "<li style='margin-left:10px;'>"+data[i].subnetName;
ul += show(data,data[i].subnetId);
ul += "</li>";
}
}
}
ul+="</ul>";
return ul;
}
var a = show(jsonData,-);
console.log(a);
var div = document.createElement(div);
div.innerHTML = a;
document.body.appendChild(div);

js递归方法创建节点的更多相关文章

  1. JS DOM创建节点

    DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...

  2. js添加创建节点和合并节点

    var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...

  3. js创建节点及其属性

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx&qu ...

  5. js的DOM节点操作:创建 ,插入,删除,复制,查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  6. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  7. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  8. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  9. 使用jQuery创建节点、将节点插入到指定的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Shellcode编程小技巧

    工作需要,需要注入其他程序监控一些东西,检测到的数据通过WM_COPY 消息发送给显示窗体.(大体是这样的还没定稿) ##1 选择一个框架 ## tombkeeper/Shellcode_Templa ...

  2. MVC5+EF6 入门完整教程

    MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@20150521 MVC5+EF6 入门完整教程9:多表 ...

  3. java是值传递还是引用传递

    首先写一个简便的Employee,以便测试使用. class Employee { private String name; public Employee(String name) { this.n ...

  4. mysql优化一 之 优化内容概述及开启慢查日志的相关配置

    1-1数据库优化的目的 首先是为了避免出现页面访问错误(基本有三种) (1)由于数据库连接timeout产生的页面5XX错误 (2)由于慢查询造成页面无法加载 (3)由于阻塞造成的数据无法提交 其次: ...

  5. JS正则表达式大全

    转自:http://wenku.baidu.com/link?url=3y930kC7F6D3wQdMjQ3fVDmiA9Wfebs_QK0UB3N3mFaEoKg4ytZORPopxufeYA6si ...

  6. python 学习笔记十五 web框架

    python Web程序 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. Python的WEB框架分为两类: 自己写socket,自 ...

  7. System Setup

    vistual studio 2013 download: http://www.microsoft.com/en-us/download/details.aspx?id=48138 http://w ...

  8. PHP调用webservice遇到 Soap WSDL Error - "failed to load external entity

    本人遇到的原因是服务器上没有安装php-soap centos安装方式: yum install php-soap 安装完成后重启 php-fpm 服务 service php-fpm restart ...

  9. 阅读笔记 火球UML大战需求分析3

    在复习回顾的以前所学的UML 统一建模语言之后,要将他们融会贯通起来,必定要进行一次事件,这样才能更好地运用各种UML,所以,了解了所有的UML图之后,就要开始接收一个练习的项目了. 这里作者给的例子 ...

  10. linux内核追踪——find_next_bit函数详详详解

    写在前面 宗旨:把话说清楚,把道理讲透彻. 约定:所有代码均来自Linux内核2.6.24版. 建议:本文介绍得十分详细,但也略显繁琐,读者可以先看“Ⅴ.总结”部分带注释的源码,如果哪里不清楚,再回头 ...