我们通常会使用table标签来展示数据内容，由于需要展示的数据内容是随时更换的，所以不可能将展示的数据列表写死在html写死在页面中，而是需要我们根据后台传来的数据随时更换，这个时候就需要我们使用js来动态生成表格。
首先我们需要先写好页面的样式。
html部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js动态生成数据列表</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#tb {
width: 500px;
border: 1px solid #000;
border-collapse: collapse;
}
#tb td, #tb th {
border: 1px solid #000;
}
#tb thead tr {
height: 50px;
background-color: lightgray;
}
#tb tbody tr {
text-align: center;
height: 30px;
}
#tb a {
text-decoration: none;
}
#tb a:hover {
color: hotpink;
}
</style>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
这个时候我们可以通过ajax向服务端发送请求，获取要展示的数据，由于主要目的是使用js动态展示列表，所本我们就假设已经获取到后台的数据。
js部分
var headers = ["姓名", "学科", "成绩", "删除"];
var datas = [
{ "name": "马闯", "subject": "语文", "score": 90 },
{ "name": "马户", "subject": "数学", "score": 100 },
{ "name": "马伦", "subject": "体育", "score": 9 },
{ "name": "马尧", "subject": "音乐", "score": 100 },
{ "name": "马震", "subject": "语文", "score": 90 },
{ "name": "马云", "subject": "语文", "score": 90 }
];
creatTable(document.body, headers, datas);
//将动态生成列表的部分封装成函数，可以重复调用，也方便统一修改
function creatTable(parent, headers, datas) {
var table = document.createElement("table");
table.id = "tb";
parent.appendChild(table);
var thead = document.createElement("thead");
table.appendChild(thead);
var tr = document.createElement("tr");
thead.appendChild(tr);
for (var i = 0; i < headers.length; i++) {
var th = document.createElement("th");
th.innerHTML = headers[i];
tr.appendChild(th);
}
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
for (var k in datas[i]) {
var td = document.createElement("td");
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
var td = document.createElement("td");
td.innerHTML = "<a href=‘javascript:‘>删除</a>";
tr.appendChild(td);
td.children[0].onclick = function () {
var lines = tbody.children.length;
if (lines <= 1) {
alert("最后一条！请留一点数据吧！");
return;
}
var tip = confirm("确认删除？");
if (tip) {
tbody.removeChild(this.parentNode.parentNode);
}
}
}
}
时间： 2024-10-22 11:18:31