JS：信息录入系统
作者：互联网
实现简单的信息录入系统：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<style>
tr {
width: 500px;
height: 60px;
}
td,
.input1 {
width: 80px;
height: 60px;
border: 1px solid black;
outline: none;
}
#inputbox {
height: 200px;
width: 250px;
}
.showbox {
width: 500px;
text-align: center;
}
.btn {
background-color: #fff;
border: 1px solid black;
margin-right: 20px;
}
.inp {
outline: none;
}
</style>
<div id="inputbox">
学号：<input class="inp" type="text"><br>
姓名：<input class="inp" type="text"><br>
年龄：<input class="inp" type="text"><br>
爱好：<input class="inp" type="text"><br>
地址：<input class="inp" type="text"><br>
<input type="submit" class="btn"><input type="reset" class="btn">
</div>
<div class="showbox">
<table id="tb" cellpadding="0" cellspacing="0">
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
<td>癖好</td>
<td>操作</td>
</tr>
</table>
</div>
<script>
//获取添加按钮的类名
var btn = document.getElementsByClassName('btn');
//重置按钮--清空填入信息
btn[1].onclick = function () {
var info = document.querySelectorAll('.inp');
info.forEach((el) => { el.value = '' })
}
//添加按钮--把内容添加到表格中
btn[0].onclick = function () {
//点击添加一行到showbox:
var tb = document.querySelector('#tb tbody');
var tr = document.createElement('tr');
tb.appendChild(tr);
//获取表单div
var inputbox = document.querySelector('.inputbox');
//点击获取所有的input值
var info = document.querySelectorAll('.inp');
//遍历每个值，创建el个td元素，把td添加到tr中
info.forEach((el) => {
var td = document.createElement('td');
td.innerHTML = el.value;
tr.appendChild(td);
})
//创建最后一个td元素，添加到tr中
var tdlast = document.createElement('td');
tr.appendChild(tdlast);
//创建删除按钮，在网页中命名为删除，把其类名改为delbtn,放入最后一个td中
var delbtn = document.createElement('button');
delbtn.innerHTML = '删除';
delbtn.classList.add('delbtn');
tdlast.appendChild(delbtn);
//点击删除按钮，清空一行
delbtn.onclick = function () {
this.parentNode.parentNode.remove();//button->td->tr
}
//创建设置按钮，在网页中命名为修改，把其类名改为setbtn,放入最后一个td中
var setbtn = document.createElement('button');
setbtn.innerHTML = '修改';
setbtn.classList.add('setbtn');
tdlast.appendChild(setbtn);
//点击修改按钮，对此行可编辑
let flag = true;
setbtn.onclick = function () {
flag = !flag;
if (flag) {
console.log('open');
this.innerHTML = '修改';
//获取当前td的值，并且放到td中
let tdchange = this.parentNode.parentNode.children;
Array.from(tdchange).forEach((el, index) => {
if (index == tdchange.length - 1) { return }
el.innerHTML = el.children[0].value;
})
} else {
console.log('close');
this.innerHTML = '保存';
//把td的innerHTML替换成input
let tdchange = this.parentNode.parentNode.children;
Array.from(tdchange).forEach((el, index) => {
if (index != tdchange.length - 1) {
var text = el.innerHTML;
el.innerHTML = "";
var input1 = document.createElement("input");
input1.classList.add('input1');
input1.value = text;
el.appendChild(input1);
}
})
}
}
};
</script>
</body>
</html>
页面效果：
实现功能：
1、增加表单信息
2、修改表达
3、保存修改
4、信息重置
5、删除录入信息
标签：el,tr,信息,JS,var,innerHTML,录入,td,document 来源： https://www.cnblogs.com/LIXI-/p/16482700.html