JS循环数组生成html表格
JS操作方法一
JSON数组
@app.route('/',methods=['GET','POST']) def index(): if request.method == 'GET': return render_template('test1.html') else: res=[ ['历史沿革','详细信息','时间信息'], ['1998-10-19','中信集团xxx','2019-05-11'], ['1998-10-19','上海沪龙国际','2019-05-11'], ['1998-10-19','重庆三原色','2019-05-11'], ['1998-10-19','陕西君让科技','2019-05-11'], ['1998-10-19','济南钢铁','2019-05-11'], ['1998-10-19','安徽新潮','2019-05-11'], ['1998-10-19','山东蓝翔','2019-05-11'], ['1998-10-19','北京电影','2019-05-11'], ['1998-10-19','杭州阿里集团','2019-05-11'], ['1998-10-19','深圳华为','2019-05-11'], ['1998-10-19','浙江天心科技','2019-05-11'], ] return jsonify(res)
JS代码
$('#submit').click(function () {
$.ajax({
url: '/',
type: 'POST',
success: function (args) {
var str = "";
str += "<table border='solid'>";
for (var i = 0; i < args.length; i++) {//该数组为嵌套数组[[xx],[xx],[xx]]形式
if (i === 0) { //取第一个数组为表头
str += "<tr>";
for (var j = 0; j < args[i].length; j++) {
str += " <th>" + args[i][j] + "</th>";
}
str += "</tr>";
}else {
str += "<tr>"; //循环取数组的值生成html代码
for (var k = 0; k < args[i].length; k++) {
str += " <td>" + args[i][k] + "</td>";
}
str += "</tr>";
}
}
str += "</table>";
document.getElementById('info').innerHTML=str
console.log(str)
}
})
});
显示效果
未完待续...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="demo"> <h2>遍历数组v-for</h2> <table border="1px"> <tr > <th v-for="(p,index) in persons[index]", v-if="index==0"> {[p]} </th> </tr> <tr> <td v-for="(p,index) in persons"> {[p]} </td> </tr> </table> <br> <button @click="setorder">点我</button> </div> <script type="text/javascript" src="../static/JS/jquery-3.3.1.js"></script> <script type="text/javascript" src="../static/JS/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#demo', delimiters:['{[', ']}'], data: { i:[], persons:'' }, methods: { setorder(){ $.ajax({ url:'/', type:'POST', success:function (data) { vm.persons = data } }) } } }) </script> </body> </html>
JS操作方法二(复杂版)
利用了 layui模块上传与分页功能
data = [[{'字段0': {'字典k0': '数据1', '字典K1': '数据2', '字典K2': 0},
'字段1': {'字典k0': '数据4', '字典K1': '数据5', '字典K2': 1},
'字段2': {'字典k0': '数据7', '字典K1': '数据8', '字典K2': 1},
'字段3': {'字典k0': '数据10', '字典K1': '数据11', '字典K2': 1}},
{'字段0': {'字典k0': '数据1', '字典K1': '数据2', '字典K2': 0},
'字段1': {'字典k0': '数据4', '字典K1': '数据5', '字典K2': 0},
'字段2': {'字典k0': '数据7', '字典K1': '数据8', '字典K2': 0},
'字段3': {'字典k0': '数据10', '字典K1': '数据11', '字典K2': 1}},
{'字段0': {'字典k0': '数据1', '字典K1': '数据2', '字典K2': 0},
'字段1': {'字典k0': '数据4', '字典K1': '数据5', '字典K2': 1},
'字段2': {'字典k0': '数据7', '字典K1': '数据8', '字典K2': 0},
'字段3': {'字典k0': '数据10', '字典K1': '数据11', '字典K2': 1}}],
[{'字段0': {'字典k0': '数据1', '字典K1': '数据2', '字典K2': 0},
'字段1': {'字典k0': '数据4', '字典K1': '数据5', '字典K2': 0},
'字段2': {'字典k0': '数据7', '字典K1': '数据8', '字典K2': 0},
'字段3': {'字典k0': '数据10', '字典K1': '数据11', '字典K2': 0}}, ]]
HTML与JS如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS循环复杂数据生成表格</title> <link rel="stylesheet" href="../static/layui/css/layui.css"> <style type="text/css"> </style> </head> <body> <div><button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传文件</button></div> <div id="demo1"></div> <div id="my_table"></div> <script type="text/javascript" src="../static/JS/jquery-3.3.1.js"></script> <script type="text/javascript" src="../static/layui/layui.js"></script> <script type="text/javascript"> let str = ''; function tableCreate(data, ps, pd) { var table_head = ['表头0', '表头1', '表头2', '表头3']; var table_info1 = ['字段0', '字段1', '字段2', '字段3']; var table_info2 = ['字典k0', '字典K1', '字典K2']; for (var k = ps; k < pd && (datas = data[k]); k++) { str += "<h2>" + '第' + (k + 1) + "</h2>"; //标题 for (var v = 0, len = datas.length; v < len && (person = datas[v]); v++) { //第一次循环：data为服务端传过来的原始数据 为array str += "<br><br>"; str += "<table class = 'layui-table' lay-even style='table-layout:fixed'>"; //拼接表格html str += '<colgroup>\n' + '<col width="120">\n' + '<col width="480">\n' + '<col width="480">\n' + '<col width="90">\n' + '</colgroup>'; str += "<thead>" + '\n' + "<tr>"; for (var j = 0, len1 = table_head.length; j < len1 && (person1 = table_head[j]); j++) { //第二次循环：tabel_head 为定义的表头 str += "<th>" + person1 + "</th>" //生成表头的html} } str += "</tr>" + '\n' + "</thead>"; for (var i = 0, len2 = table_info1.length; i < len2 && (person2 = table_info1[i]); i++) { //第三次循环：table_info1为 定义好的四要素（因为data下一层的数据为字典） str += "<tr>"; str += "<td>" + person2 + "</td>"; //for (var k = 0, len3 = person[person2].length; k < len3 && (person3 = person[person2][k]); k++) { //第四次循环：根据data[v][table_info1[i]]便可确定取那一行 for (var l = 0, len3 = table_info2.length; l < len3 && (person3 = table_info2[l]); l++) { //改完数据结构针对字典情况 if (person[person2][table_info2[2]] === 1) { //判断 字典下的数组中第三位元素值是否为1 person[person2][table_info2[2]] = '不一致' //更改为 中文不一致 } if (person[person2][table_info2[2]] === '不一致') { str += "<td class='error'>" + person[person2][person3] + "</td>" //如果不一致 加入red样式颜色 } else { person[person2][table_info2[2]] = '一致'; str += "<td>" + person[person2][person3] + "</td>" } } //} str += "</tr>"; } str += "</table>"; } } return str } layui.use('upload', function () { var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test1' //绑定元素 , url: '/' //上传接口 , accept: 'file' //支持的数据类型 ：file代表所有文件 , exts: 'docx' //允许的文件后缀 , size: 100 //文件大小 , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。 $("#loading1").fadeIn(100); }//上传loading , done: function (res) { console.log(res); //document.getElementById("my_table").innerHTML = str; layui.use('laypage', function () { var laypage = layui.laypage; //执行一个laypage实例 laypage.render({ elem: 'demo1' //注意，这里的 test1 是 ID，不用加 # 号 , limit: 5 , count: res.length //数据总数，从服务端得到 , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] , jump: function (obj) { //console.log(obj.limit); //单页的容量 //console.log(obj.count) //总数量 //console.log(obj.curr) //当前的页码 //模拟渲染 str = ''; var pagestart = (obj.curr - 1) * obj.limit; var pageend = obj.curr * obj.limit; tableCreate(res, pagestart, pageend); //console.log(str) document.getElementById('my_table').innerHTML = str; $('html ,body').animate({scrollTop: 0}, 0); } }) }); $("#loading1").fadeOut(100); //关闭loading } , error: function () { //请求异常回调 console.log('异常了') $("#loading1").fadeOut(100); //关闭loading } }); }); </script> </body> </html>
