<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS循环渲染HTML</title>
</head>
<body>
<ul id="ul&qu...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS循环渲染HTML</title>
</head>
<body>
<ul id="ul"></ul>
<script type="text/javascript">
window.onload=function(){
var arrar=["test1","test2","test3"];
var html="";
for(var i=0; i<arrar.length;i++){
html +="<li>"+ arrar[i] +"</li>";
}
document.getElementById("ul").innerHTML=html;
}
</script>
</body>
</html>例2
<!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>
<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>
</body>
</html>例3
<body>
<p id="hang"></p>
<script>
arr = [["1","2","3"],["4","5","6"],["7","8","9"]];
var str = "";
str += '<table border="0">';
str += '<tr><th>aa</th><th>bb</th><th>cc</th></tr>'
for (x in arr)
{
str += "<tr>";
for (y in arr[x])
{
str += "<td>" + arr[x][y] + "</td>";
}
str += "</tr>";
}
document.getElementById("hang").innerHTML=str;
</script>
</body>例4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//首先设置行，列
var cols = 6; //６列
var rows = 6; //６行
var htmlstr = "<table border='1px'>";
for(i = 1; i <= rows; i++) {
htmlstr += "<tr>";
for(j = 1; j <= cols; j++) {
htmlstr += "<td >" + i + "行" + j + "列" + "</td>";
}
htmlstr += "</tr>";
}
htmlstr += "</table>";
document.write(htmlstr);
</script>
</html>阅读全文