js多维数组渲染HTML js for循环渲染页面

来源：互联网发布：流川枫和苍井空知乎编辑：程序博客网时间：2024/05/22 12:25

直接上代码，有不懂的可以留言。

<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><title></title></head><body><form action=""><tbody id="daohang"></tbody>                </form></body><script type="text/javascript">//页面渲染 $.ajax({type:"get",url:"http://***",async:true,dataType:"json",success:function(data){console.log(JSON.stringify(data))var arr={}; var obj=eval(data);var dh='';for(i=0;i<obj.length;i++){for(j=0;j<obj[i].child.length;j++){arr = obj[i].child[j]console.log("111:"+JSON.stringify(obj[i]))console.log("ww:"+arr.id)}                                    if(obj[i].is_show==1){     var show='显示';    }else{     var show='隐藏';    }    dh+='<ol class="dd-list">';dh+='<li class="dd-item full" data-id="74576">  ';  dh+='   <div class="dd-handle">[ID:'+obj[i].id+'] '+obj[i].title +'<span class="pull-right">  ';          dh+='          <div class="label label-success" data-toggle="ajaxSwitch" data-switch-value="1">'+show+'</div>        ';  dh+='       <ol class="dd-list">              ';  dh+=' <li class="dd-item full" data-id="74577">      ';  dh+='<div class="dd-handle" style="width:100%;">     ';  dh+='<img src="http://123.207.41.93/jtct/Uploads/'+arr.image_1+'" width="30" height="30" onerror="$(this).remove()"  ';

dh+='     style="padding:1px;border: 1px solid #ccc;float:left;" />   [ID: '+arr.id+'] '+arr.title+' <span class="pull-right">';                  dh+='                      <div class="label label-success" data-toggle="ajaxSwitch" data-switch-value="'+arr.is_show+'"></div>显示</div>       ';  dh+='</div>         ';  dh+='</li>       ';  dh+='</ol>    ';     }document.getElementById('daohang').innerHTML=dh;},error:function(){alert('NO');}});  </script></html>

阅读全文

0 0