json 复制代码【www.602.net】

我是span

json 复制代码【www.602.net】。json转html 三重奏 原料:json 复制代码
代码如下: var json={ ‘div’:{id:’flower’,className:”a1″,sub:[ {
‘ul’:{id:’flower1′,className:[json 复制代码【www.602.net】。”a2″,”a3″],sub:[
{‘li’:{num:3,con:”内容内容内容”,fn:{‘click’:function}}}} ]www.602.net,} }, {
‘ul’:{id:’flower4′,className:[“a2″,”a3″],sub:[
{‘li’:{num:3,con:”第2轮了”,fn:{‘click’:function}}}} ]json 复制代码【www.602.net】。json 复制代码【www.602.net】。} }, {
‘span’:{id:’q’,con:”我是span”} } ]} } id=id className=class
num=循环次数 fn=绑定函数 con=元素内容 sub =代表有子节点 主菜:method
复制代码 代码如下: JsonToHtml={
init:function{//jsonDB,父元素 for{ if{var num=1}else{var
num=data[attr][“num”]||1}//如果存在id,则循环默认为1,因为id不可重复
for{ var obj= document.createElement; parent ? parent.appendChild :
document.body.appendChild;//递归时传入父元素,没有则默认从body输出
for(var attr2 in data[attr]){ var _tempAttr=data[attr][attr2];
switch{ case “id”: obj.id=_tempAttr; break; case “className”:
//支持多个class传入~简了点~ if(_tempAttr.length && _tempAttr.pop){
for(var k=0;k<_tempattr.length obj.classname=”obj.className+””
break=”” case=”” for=”” i=”0;i<_tempAttr.length;i++){” _tempattr=””
this.init=”” :=”” obj.innerhtml=”_tempAttr;” if=””
obj.addeventlistener=”” false=”” else=”” obj.attachevent=”” fns=””
default=”” obj.setattribute=”” return=”” this=””
jsontohtml.init=””>复制代码 代码如下:

  • 第2轮了
  • 第2轮了
  • 第2轮了
  • 内容内容内容
  • 内容内容内容
  • 内容内容内容

主要还是通过递归和迭代来遍历json成员生成html元素
,比较好的是num能制定循环次数可以少写很多代码.具体应用看场景了
这只是个小例子,期待后续!

发表评论

电子邮件地址不会被公开。 必填项已用*标注