Javascript 通过json自动生成Dom小示例
2010-03-31 00:00:00 来源：WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簻椤掋垺銇勯幇顖毿撻柟渚垮妼椤粓宕卞Δ鈧獮濠勭磽閸屾艾鈧懓顫濋妸鈺佺疅缂佸顑欓崥瀣煕椤愵偅绶氱紓鍐╂礋濮婂宕掑▎鎴М濠电姭鍋撻梺顒€绉甸幆鐐哄箹濞ｎ剙濡肩紒鎰殜閺屸€愁吋鎼粹€茬敖婵炴垶鎸哥粔鐢稿Φ閸曨垰鍐€妞ゆ劦婢€濞岊亪姊虹紒妯诲蔼闁稿海鏁诲濠氭晲婢跺﹤宓嗛梺缁樺姈缁佹挳宕戦幘璇叉嵍妞ゆ挻绋戞禍鐐叏濡厧浜鹃悗姘炬嫹
闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簼閹癸綁鏌ｉ鐐搭棞闁靛棙甯掗～婵嬫晲閸涱剙顥氬┑掳鍊楁慨鐑藉磻濞戔懞鍥偨缁嬫寧鐎梺鐟板⒔缁垶宕戦幇鐗堢厵缂備焦锚缁椦囨煃瑜滈崜锕傚矗閸愵煈娼栭柛婵嗗珔瑜斿畷鎯邦槾濞寸姴銈稿铏规嫚閼碱剛顔夐梺鐓庣秺缁犳牠骞冩ィ鍐╁€婚柦妯侯槼閹芥洟姊洪棃娑辨濠碘€虫喘瀹曘垽鎮介崨濞炬嫼闁荤喐鐟ョ€氱兘宕箛娑欑厱闁绘ê纾晶鐢告煏閸℃鈧湱缂撴禒瀣窛濠电姴瀚獮鍫ユ⒑绾懎顥嶉柟娲讳簽濡叉劙寮撮悢鍝勨叞闂傚倸鍊风欢姘缚瑜嶇叅闁靛牆娲犻崑鎾愁潩椤愩垹绁梺缁樹緱閸ｏ綁鐛幒鎳虫棃鍩€椤掑倻涓嶉柨婵嗘缁♀偓闂傚倸鐗婄粙鎴﹀汲濞嗗緷鐟扳堪閸垻鏆梺鍝勭焿缂嶄焦鎱ㄩ埀顒勬煃閹増纭炬繝鈧潏銊х彾闁哄洨鍠撶弧鈧┑顔斤供閸橀箖宕㈤悽鍛娾拺缂備焦锚婵箓鏌涢幘鏉戝摵闁诡喗蓱濞煎繘濡搁妶鍥╃暰闂備礁婀辩划顖滄暜閻愬瓨娅犳繛鎴炴皑绾捐偐绱撴担璐細婵炴彃顕埀顒冾潐濞叉牕鐣烽鍐簷闂備礁鎲￠崝鏇㈠疮閻樿绀堟繝闈涚墛瀹曞弶绻涢幋鐐ㄧ細闁哄棗妫楅埞鎴︽偐鏉堫偄鍘￠梺杞扮劍閻楁粎妲愰幘瀛樺濞寸姴顑呴幗鐢告⒑閸︻厽鍤€婵炲眰鍊濋幃楣冩倻閽樺顔婇梺瑙勬儗閸樹粙宕撻悽鍛娾拺闁荤喐婢橀幃渚€鏌ｉ幒鐐电暤闁诡喗顨婇獮鏍ㄦ媴閸忓瀚藉┑鐐舵彧缁插潡宕曢妶澶婂惞闁逞屽墴濮婃椽骞栭悙娴嬪亾閺嶎厽鍋嬮柣妯垮吹瀹撲線鐓崶銊р姇闁哄懏鎮傞弻銊╂偆閸屾稑顏�
婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌ｉ幋锝嗩棄闁哄绶氶弻娑樷槈濮楀牊鏁鹃梺鍛婄懃缁绘垿濡甸崟顖氱闁告鍋熸禒鑲╃磽娴ｅ搫顎岄柛銊ョ埣瀵鈽夐姀鐘电杸闂傚倸鐗婄粙鎺楁倶閸儲鍊甸柣鐔哄閸熺偟绱掔拠鎻掓殻濠碉紕鏁诲畷鐔碱敍濮橀硸鍟嬮梺璇查叄濞佳囧箺濠婂牊鍋╁┑鍌氭啞閳锋垹鐥鐐村婵炲吋鍔栫换娑㈡嚑椤掆偓閺嬪孩銇勯銏㈢缂佽鲸甯掕灒闁兼祴鏅滈崵宀勬⒒娓氣偓閳ь剛鍋涢懟顖涙櫠椤旇偐鏆嗛柨婵嗙墕閸斿灚銇勯敂鐣屽弨闁诡噯绻濇俊鑸靛緞鐎ｎ剙甯鹃梻浣稿閸嬪懐鎹㈤崘顔肩；妞ゅ繐鎳愮粻鍓р偓鐟板閸犳洜鑺辨繝姘畾闁绘柨鍚嬮埛鎴︽倵閸︻厼校闁靛棗鍟撮弻銈夊礃閼碱剙鐓熼悗瑙勬礃缁诲牓寮崘顔肩劦妞ゆ帒瀚ч埀顒佹瀹曟﹢顢欓崲澹洦鐓曢柍鈺佸枤濞堟﹢鏌ｉ悢绋垮婵﹥妞介幃鈩冩償閳╁啯鐦ｉ梻浣虹帛閻楁洟濡剁粙璺ㄦ殾闁绘垶岣跨弧鈧梺鎼炲劀閸愩劎銈梻鍌欑窔濞佳勵殽韫囨洘顫曢柡鍥ュ灩閸屻劍銇勮箛鎾跺闁抽攱鍨块弻鐔兼嚃閳轰椒绮堕梺鍛婃⒐椤ㄥ﹪寮婚敓鐘插窛妞ゆ棃鏁慨鍥╃磽娴ｇǹ鈧湱鏁悢濡撳洨鈧潧鎽滅壕濂稿级閸稑濡肩紒妤佺缁绘盯鎮℃惔锝囶啋闂佺硶鏂侀崜婵嬪箯閸涘瓨鐓ラ悗锝呯仛缂嶆姊婚崒姘偓宄懊归崶褜娴栭柕濞炬櫆閸婂潡鏌ㄩ弴鐐测偓鍝ョ不閺屻儲鐓曢柕澶樺枛婢ь噣鏌＄€ｂ晝绐旈柡宀€鍠栧畷婊嗩槾閻㈩垱鐩弻锟犲川椤旇棄鈧劙鏌＄仦璇插闁诡喓鍊濆畷鎺戔槈濮楀棔绱�闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簻椤掋垺銇勯幇顖毿撻柟渚垮妼椤粓宕卞Δ鈧獮濠勭磽閸屾艾鈧懓顫濋妸鈺佺疅缂佸顑欓崥瀣煕椤愵偅绶氱紓鍐╂礋濮婂宕掑▎鎴М濠电姭鍋撻梺顒€绉甸幆鐐哄箹濞ｎ剙濡肩紒鎰殜閺屸€愁吋鎼粹€茬敖婵炴垶鎸哥粔鐢稿Φ閸曨垰鍐€妞ゆ劦婢€濞岊亪姊虹紒妯诲蔼闁稿海鏁诲濠氭晲婢跺﹤宓嗛梺缁樺姈缁佹挳宕戦幘璇叉嵍妞ゆ挻绋戞禍鐐叏濡厧浜鹃悗姘炬嫹 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻锝夊箣閿濆憛鎾绘煕閵堝懎顏柡灞诲€濆畷顐﹀Ψ閿旇姤鐦庡┑鐐差嚟婵潧顫濋妸褎顫曢柟鎹愵嚙绾惧吋绻涢崱妯虹瑨闁告﹫绱曠槐鎾寸瑹閸パ勭彯闂佹悶鍔岄悥鍏间繆閹绢喖绀冩い鏃傚帶缁愭盯姊洪崫鍕垫Ч闁搞劌缍婂畷銏犆洪鍛偓鍨殽閻愯尙浠㈤柛鏃€纰嶉妵鍕晜鐠囪尙浠搁悗瑙勬穿缁绘繈鐛惔銊﹀殟闁靛／鍐ㄥ闂傚倸饪撮崑鍕洪敃鈧叅闁哄秲鍔庢晶锟犳⒒閸屾瑦绁版い鏇嗗應鍋撻崹顐㈡诞鐎规洘绮撻幃銏＄附婢跺绋侀梻浣瑰劤缁绘劕锕㈡潏鈺侇棜闁稿繘妫跨换鍡樸亜閺嶃劎顣查柟顖氱墛閵囧嫰顢曢姀銏㈠姱濠殿喖锕ュ钘夌暦閻戠瓔鏁囨繛鎴炵懃閻濋亶姊绘担鍛靛綊顢栭崨顓囨稑鈹戠€ｎ亞鐣鹃梺閫炲苯澧柕鍥у缁犳盯骞樼€垫悶鍋愭繝纰樻閸ㄦ壆鈧碍婢橀～蹇撁洪鍕炊闂佸憡娲﹂崜姘跺箯閸楃偐鏀介柣鎰絻缁狙冪暆閿濆懏鍋ユ鐐村灴婵偓闁绘﹩鍋呴弬鈧┑鐘垫暩婵鈧凹鍣ｅ鍫曞箹娴ｅ厜鎷洪梺鍛婄箓鐎氼厼顔忓┑鍡忔斀妞ゆ梹鍎抽崢鎾煙椤旇宓嗗┑锛勫厴閸╋繝宕掑Δ浣割伜婵犵數鍋犻幓顏嗗緤娴犲绠规い鎰╁€栭弳婊堟偣鏉炴媽顒熼柣鏂挎閺岋綁鎮㈠畡鎵泿闂佽 鍋撻柤濮愬€楃壕濂告煕鐏炵偓鐨戠€涙繂螖濡ゅ﹣绨烽柛妤€鍟块悾鐑芥偂鎼搭喗鍍甸梺鎸庣箓閹冲秵绔熼弴銏♀拺闁告繂瀚弳娆撴煟濡も偓濡稓鍒掗崼銉ョ闁崇懓銇樼花濠氭椤愩垺鎼愭繛瀵稿厴钘濋柨鏇楀亾闂囧绻濇繝鍌滃ⅱ闁伙絾妞介弻锛勪沪鐠囨彃顬堥梺瀹狀潐閸ㄥ灝鐣烽崡鐐╂闁瑰吀绀佹禍鐐繆閵堝倸浜惧銈庡弨閸庡篓娓氣偓閺屾盯鎮╁畷鍥р拰濠电姭鍋撳〒姘ｅ亾婵﹨娅ｇ槐鎺懳熼弴鐔风伌闁诡喚鍏樻俊鐤槷闁稿鎸搁～婵嬫偂鎼淬垻浜剧紓鍌欑贰閸犳氨鍒掗鐐参ч柨婵嗩槸缁€鍐煃閸濆嫬鏆欐鐐茬墛娣囧﹪鎮欓鍕ㄥ亾閺嶎厼绀夐柟杈剧畱绾惧綊鏌￠崶銉ョ仼闁告垹濞€楠炴牕菐椤掆偓婵′粙鏌ｉ幘璺烘灈闁绘搩鍋婂畷鎯邦檨闁稿骸绻橀弻娑㈠籍閳ь剛鍒掗幘璇茶摕闁哄洢鍨归悙濠勬喐瀹ュ鏁傛い鎾跺Л閸嬫挸鈻撻崹顔界亶濠电偛鍚嬮悷銊╂倶閹烘鈷戦柛娑橈功缁犳捇鎮楀鐓庡⒉妞ゃ倕鍊圭换婵堝枈婢跺瞼锛熼梺绋款儐閸ㄥ灝鐣烽幇鏉跨闁挎洍鍋撻柛銊ュ€圭换娑橆啅椤旇崵鍑归梺绋款儜缁绘繈寮诲澶婁紶闁告洦鍓欏▍锝囩磽娴ｅ搫校闁绘濞€瀵顓兼径濠勫幐婵炶揪绲介幉鈥斥枔閺屻儲鈷戠紒瀣閹癸綁鏌涢悩宕囧⒌鐎殿喖顭峰鎾閻橀潧鈧偤鎮峰⿰鍐ら柤楦块哺缁绘繂顫濋鐘插箥闂備礁鎲￠崹顖炲磹閺嶎偀鍋撳鐐
json转html 三重奏
原料:json
var json={
'div':{id:'flower',className:"a1",sub:[
{
'ul':{id:'flower1',className:["a2","a3"],sub:[
{'li':{num:3,con:"内容内容内容",fn:{'click':function(){alert('我是LiLi')}}}}
]}
},
{
'ul':{id:'flower4',className:["a2","a3"],sub:[
{'li':{num:3,con:"第2轮了",fn:{'click':function(){alert('我是LiLi')}}}}
]}
},
{
'span':{id:'q',con:"我是span"}
}
]}
}
id=id
className=class
num=循环次数
fn=绑定函数
con=元素内容
sub =代表有子节点
主菜:method
JsonToHtml={
init:function(data,parent){//jsonDB,父元素
for(var attr in data){
if(data[attr]["id"]){var num=1}else{var num=data[attr]["num"]||1}//如果存在id,则循环默认为1,因为id不可重复
for(var j=0;j<num;j++){
var obj= document.createElement(attr);
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//递归时传入父元素,没有则默认从body输出
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2];
switch(attr2){
case "id":
obj.id=_tempAttr;
break;
case "className": //支持多个class传入~简了点~
if(_tempAttr.length && _tempAttr.pop){
for(var k=0;k<_tempAttr.length;++k){
obj.className= obj.className+" "+_tempAttr[k] ;
}
}else{ obj.className =_tempAttr;}
break;
case "sub": //如果有子节点则开始递归
for(var i=0;i<_tempAttr.length;i++){
_tempAttr[i].sub ? this.init(_tempAttr[i]) : this.init(_tempAttr[i],obj)
}
break;
case "con"://设置内容,可以生成新的子元素
obj.innerHTML=_tempAttr;
break;
case "num":
break;
case "fn"://绑定方法
for(var fns in _tempAttr){
if (window.addEventListener) {
obj.addEventListener(fns, _tempAttr[fns], false);
} else {
if (window.attachEvent) {
obj.attachEvent("on" + fns, _tempAttr[fns]);
}
}
}
break;
default : //设置属性
obj.setAttribute(attr2,_tempAttr);break;
}
}
}
}
return this;
}
}
JsonToHtml.init(json); //初始化
Tags：Javascript 通过 json
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript 通过json自动生成Dom小示例”更多相关内容
中查找“Javascript 通过json自动生成Dom小示例”更多相关内容
赞助商链接
