在没有学习js之前，当遇到需要建表时，往往都是比较麻烦的，而且不容易根据新的需求来更改。自从学了js之后，再也不用担心这个问题辣。使用js动态建表，在一个页面中出现多个表格时，还可以通过其函数多次调用来快速实现，简直不要太愉快~
献上代码，有不足的地方还请指正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse;
}
table input {
80px;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="insert" id="btn">
</div>
<script>
var heads = ["姓名", "学科", "成绩", "操作"];
var datas = [
{"name":"张三1","subject":"语文1","score":99.8},
{"name":"张三2","subject":"语文2","score":80.8},
{"name":"张三3","subject":"语文3","score":70.8},
{"name":"张三4","subject":"语文4","score":100},
{"name":"张三5","subject":"语文5","score":60},
{"name":"张三6","subject":"语文6","score":70},
{"name":"张三7","subject":"语文7","score":89.8}
];
window.onload = function () {
var box = document.getElementById("box");
//刷新表格
var table = createTable(box,heads,datas);
//插入一行
var btn = document.getElementById("btn");
btn.onclick = function () {
//新生成一行
var row = table.insertRow(table.rows.length);
for (var i = 0; i < 3; i++) {
var cell = row.insertCell(i);
cell.innerHTML = "<input type='text' />";
}
cell = row.insertCell(-1);
cell.innerHTML ='<a href="#">确定</a> <a href="#">取消 </a>';
//确定 取消
var sure = cell.children[0];
var cancel = cell.children[1];
//给按钮注册事件
sure.onclick = function () {
var td = this.parentNode.parentNode;
var t1 = row.cells[0].firstElementChild.value;
var t2 = row.cells[1].firstElementChild.value;
var t3 = row.cells[2].firstElementChild.value;
datas.push({"name":t1,"subject":t2,"score":parseFloat(t3) });
//删除表格
table.parentNode.removeChild(table);
//刷新表格
table = createTable(box,heads,datas);
return false;
}
cancel.onclick = function () {
//点击删除本行
var tr = this.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
}
}
function createTable(parent, heads, datas) {
//创建table
var table = document.createElement("table");
parent.appendChild(table);
table.border = "1px";
table.style.width = "400px";
//创建表头
var thead = table.createTHead();
thead.style.backgroundColor = "lightgray";
var row = thead.insertRow(0);
heads.forEach(function (item, index) {
var th = document.createElement("th");
th.style.height = "40px";
thead.appendChild(th);
setInnerText(th, item);
});
createCells(table, datas);
function createCells(table, datas) {
var tbody = document.createElement("tbody");
table.appendChild(tbody);
tbody.style.textAlign = "center";
//根据原始数据添加行、列
datas.forEach(function (item, index) {
var row = tbody.insertRow(index);
//添加列
var i = 0;
for(var key in item) {
var cell = row.insertCell(i);
i++;
setInnerText(cell, item[key]);
}
//最后一列
cell = row.insertCell(i);
cell.innerHTML = "<a href='#' index='"+ index +"'>删除</a>";
//删除
var link = cell.firstElementChild;
link.onclick = function () {
//tbody.deleteRow(tbody,this.parentNode.parentNode); //不加此方法无法任意删除你当前删除的行，总是删除第一行
tbody.deleteRow(indexOfRows(tbody,this.parentNode.parentNode));
//不添加此方法，则添加新数组时，被删除的也会重新显示。
datas.splice(indexOfRows(tbody,this.parentNode.parentNode))
}
});
}
return table;
}
//返回行的索引
function indexOfRows(tbody, row) {
var index = -1;
for(var i = 0; i < tbody.rows.length; i++) {
if (tbody.rows[i] === row) {
index = i;
break;
}
}
return index;
}
//设置innerText
function setInnerText(element,content) {
if (element.textContent) {
element.textContent = content;
}else{
element.innerText = content;
}
}
</script>
</body>
</html>