模拟录入成绩系统，对数据在前端页面进行增删。
点击生成表格按钮，自动生成一个表格，这里的数据是写死的。可以进行删除。
点击添加按钮，自动生成一行，在输入框内输入相关内容，点击确定，生成新数据。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table {
text-align: center;
}
thead td {
width: 100px;
height: 30px;
background: #ccc;
}
tbody td {
height: 25px;
}
input {
width: 70px;
height: 20px;
}
.button {
width: 70px;
height: 30px;
margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<input type="button" value="生成表格" id="btn" class="button" />
<br/>
<div id="dv">
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbd">
</tbody>
</table>
</div>
<input type="button" value="添加" id="btn2" class="button" />
<!-- <script src="common.js"></script> -->
<script>
function zy$(id) {
return document.getElementById(id)
};
var arr = [{
"name": "张三",
"subject": "语文",
"score": "80"
},
{
"name": "李四",
"subject": "数学",
"score": "78"
},
{
"name": "王五",
"subject": "英语",
"score": "90"
}
];
//注册点击事件，生成现有表格
zy$("btn").onclick = function () {
//tbody中的内容只出现一次
if (!zy$("tbd").firstElementChild) {
//遍历arr
for (var i = 0; i < arr.length; i++) {
//创建一行
var trObj = document.createElement("tr");
//追加到tbody中
zy$("tbd").appendChild(trObj);
//修改ID值
trObj.id = "cc" + i;
//创建列
//第一列
var td1 = document.createElement("td");
trObj.appendChild(td1);
td1.innerHTML = arr[i].name;
//第二列
var td2 = document.createElement("td");
trObj.appendChild(td2);
td2.innerHTML = arr[i].subject;
//第三列
var td3 = document.createElement("td");
trObj.appendChild(td3);
td3.innerHTML = arr[i].score;
//第四列
var td4 = document.createElement("td");
trObj.appendChild(td4);
//创建a标签
var aObj = document.createElement("a");
td4.appendChild(aObj);
//a的跳转地址
aObj.href = "javascript:void(0)";
aObj.innerText = "删除";
//点击删除
aObj.onclick = function () {
this.parentNode.parentNode.parentNode.
removeChild(this.parentNode.parentNode);
};
}
}
}
//注册点击事件，添加
zy$("btn2").onclick = function () {
//创建一行
var trObj = document.createElement("tr");
//追加到tbody中
zy$("tbd").appendChild(trObj);
//创建列
//一列
var td1 = document.createElement("td");
trObj.appendChild(td1);
var input1 = document.createElement("input");
td1.appendChild(input1);
//二列
var td2 = document.createElement("td");
trObj.appendChild(td2);
var input2 = document.createElement("input");
td2.appendChild(input2);
//三列
var td3 = document.createElement("td");
trObj.appendChild(td3);
var input3 = document.createElement("input");
td3.appendChild(input3);
//四列
var td4 = document.createElement("td");
trObj.appendChild(td4);
//a标签确定标签
var aObj = document.createElement("a");
td4.appendChild(aObj);
aObj.href = "javascript:void(0)";
aObj.innerText = "确定";
//注册点击事件，确定
aObj.onclick = function () {
td1.innerText = input1.value;
td2.innerText = input2.value;
td3.innerText = input3.value;
//点击确定之后，第四列会发生变化
//删除现有第四列
this.parentNode.parentNode.removeChild(this.parentNode);
//创建新的第四列
var td4 = document.createElement("td");
trObj.appendChild(td4);
//第四列中的内容
var aObj = document.createElement("a");
td4.appendChild(aObj);
aObj.innerText = "删除";
aObj.href = "javascript:void(0)";
//删除
aObj.onclick = function () {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
};
};
//a标签，取消标签
var aObj2 = document.createElement("a");
td4.appendChild(aObj2);
aObj2.href = "javascript:void(0)";
aObj2.innerText = "取消";
//注册点击事件，取消
aObj2.onclick = function () {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
};
};
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yuebanzhou/p/9133293.html
时间： 2024-10-29 12:35:13