夫陶公清风千古，余又何人，敢称庶几
前言
当我们要显示从后端请求的数据的时候，大多数情况下后端响应给前端的都是json类型的数据，
我们需要解析json数据把数据陈列出来，其实我们可以完全通过js生成表格，不用jstl表达式。
二、实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js动态创建表格</title>
<style>
table {
background-color: azure;
text-align: center;
width: 80%;
text-align: center;
margin: auto;
height: 200px;
}
table th {
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
const div = document.getElementById("div");
const arrays = [{
id: '1001',
name: '胡歌',
status: '可用'
}, {
id: '1002',
name: '清风',
status: '可用'
},
{
id: '1003',
name: '赵敏',
status: '可用'
}
];
var ths = ["编号", "姓名", "状态"];
const tab = document.createElement('table');
tab.border = '1';
const tr = document.createElement('tr');
for (var j = 0; j < ths.length; j++) {
const thh = document.createElement('th');
thh.innerText = ths[j];
tr.appendChild(thh);
tab.appendChild(tr);
}
for (var i = 0; i < arrays.length; i++) {
var new_tr = document.createElement('tr');
var new_td_id = document.createElement('td');
new_td_id.innerHTML = arrays[i].id;
new_tr.appendChild(new_td_id);
var new_td_name = document.createElement('td');
new_td_name.innerHTML = arrays[i].name;
new_tr.appendChild(new_td_name);
var new_td_status = document.createElement('td');
new_td_status.innerHTML = arrays[i].status;
new_tr.appendChild(new_td_status);
tab.appendChild(new_tr);
}
div.appendChild(tab);
</script>
</body>
</html>
三、运行截图
