DOM：信息录入系统
实现简单的信息录入系统：
方案一：简单实现
<!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>Document</title>
</head>
<body>
<style>
tr {
width: 700px;
height: 60px;
}
td,
.input1 {
width: 120px;
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 class="tfirst">
<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 = '' })
}
//创建全选框、反选框
//创建第一行最后一个全选td到tfirst中
var tdall = document.createElement('td');
var tfirst = document.querySelector('.tfirst');
tfirst.appendChild(tdall);
tdall.classList.add('tdall');
//在tfirst中加入全选和反选的input框
var inputall = document.createElement('input');
inputall.classList.add('inputall');
tdall.innerHTML = '全选/反选'
tdall.appendChild(inputall);
inputall.type = 'checkbox';//全选
var inputnone = document.createElement('input');
inputnone.classList.add('inputnone');
tdall.appendChild(inputnone);
inputnone.type = 'checkbox';//反选
//添加按钮--把内容添加到表格中
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);
//创建单个勾选框
//创建一个td，添加到tr中
var tdlast2 = document.createElement('td');
tdlast2.classList.add('tdlast2');
tr.appendChild(tdlast2);
// //添加一个input框在tdlast2中
var inputlast = document.createElement('input');
inputlast.classList.add('inputlast');
tdlast2.appendChild(inputlast);
//在inputlast中设置属性为checkbox或者radio
inputlast.type = 'checkbox';
// 给全选框绑定点击事件，当点击全选框时，每个单选框都自动被选中
inputall.onclick = function () {
var inputlastAll = document.querySelectorAll('.inputlast');
inputlastAll.forEach((el) => {
if (inputall.checked) {
el.checked = 'checked';
} else {
el.checked = '';
}
})
}
// 给反选框绑定点击事件，当点击反选框时，每个单选框都自动不被选中
inputnone.onclick = function () {
let inputlastAll = document.querySelectorAll('.inputlast');
inputlastAll.forEach((el) => {
console.log(el);
if (!inputnone.checked) {
el=inputlast;
} else {
el.checked = '';
}
})
}
//创建删除按钮，在网页中命名为删除，把其类名改为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 - 2) || (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) && (index != tdchange.length - 2)) {
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、删除录入信息
6、全部勾选和反选
方案二（优化）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-family: "楷体";
}
.wrapper {
width: 300px;
margin: 0 auto;
/* background-color: red; */
text-align: center;
color: blue;
}
.wrapper>div {
margin-top: 10px;
}
.info {
width: 100px;
outline: none;
border-radius: 5px;
border: 1px solid #ccc;
text-indent: 5px;
}
.btn {
width: 50px;
height: 25px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: skyblue;
color: #000;
outline: none;
}
table {
width: 800px;
margin-top: 50px;
margin-left: -150px;
border: 1px solid #ccc;
}
td {
width: 20%;
}
th {
background-color: blue;
color: #fff;
}
td input {
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>学号：<input class="info" type="text"></div>
<div>姓名：<input class="info" type="text"></div>
<div>年龄：<input class="info" type="text"></div>
<div>爱好：<input class="info" type="text"></div>
<div>地址：<input class="info" type="text"></div>
<div>
<input type="submit" class="btn" value="添加">
<input type="reset" class="btn" value="重置">
</div>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>癖好</th>
<th>操作</th>
<th>
<label for="grad1">
全选<input type="radio" id="grad1" name="grad">
</label>
<label for="grad2">
反选<input type="radio" id="grad2" name="grad" >
</label>
</th>
</tr>
</table>
</div>
<script>
var grads=document.querySelectorAll("input[name='grad']")
console.log(grads,22222)
grads[0].onclick=function(){
var arr=document.querySelectorAll(".yewucheckbox")
arr.forEach((el)=>{
el.checked=true
})
}
grads[1].onclick=function(){
var arr=document.querySelectorAll(".yewucheckbox")
arr.forEach((el)=>{
el.checked=false
})
}
var btns = document.querySelectorAll(".btn")
//重置
btns[1].onclick = function() {
var infos = document.querySelectorAll(".info")
infos.forEach((el) => {
//el是每一个.info的输入框
el.value = ""
})
}
btns[0].onclick = function() {
//把全选和反选的√去掉
grads.forEach(el=>{
el.checked=false
})
//创建tr元素 添加到table中
var wrappertab = document.querySelector(".wrapper table")
var tr = document.createElement("tr")
wrappertab.appendChild(tr)
var infos = document.querySelectorAll(".info")
infos.forEach((el) => {
var td = document.createElement("td")
td.innerHTML = el.value
tr.appendChild(td)
})
var tdlast = document.createElement("td")
tr.appendChild(tdlast)
var xuanzetd = document.createElement("td")
tr.appendChild(xuanzetd)
var xuanzeinput=document.createElement("input")
xuanzeinput.type="checkbox"
xuanzeinput.className="yewucheckbox"
xuanzetd.appendChild(xuanzeinput)
// tdlast.innerHTML="666"
var delbtn = document.createElement("button")
delbtn.innerHTML = '删除'
delbtn.classList.add("btn")
tdlast.appendChild(delbtn)
delbtn.onclick = function() {
// console.log(this)
this.parentNode.parentNode.remove()
}
var setbtn = document.createElement("button")
setbtn.innerHTML = '修改'
setbtn.classList.add("btn")
tdlast.appendChild(setbtn)
let flag = true
setbtn.onclick = function() {
// console.log(this,111111)
flag = !flag
if (flag) {
console.log("开")
this.innerHTML = "修改"
//把当前这一排的 td内部的输入框的数据 value 获取了设置到td中
let tds = this.parentNode.parentNode.children
Array.from(tds).forEach((el, index) => {
if (index == tds.length - 1) {
return
}
el.innerHTML = el.children[0].value
})
} else {
console.log("关")
this.innerHTML = "保存"
//把当前这一排的 td的innerHTML 替换成input
// console.log(this.parentNode.parentNode,1111111111)
let tds = this.parentNode.parentNode.children
Array.from(tds).forEach((el, index) => {
if (index != tds.length - 1) {
var text = el.innerHTML
el.innerHTML = ""
var input1 = document.createElement("input")
input1.value = text
el.appendChild(input1)
}
})
}
}
}
</script>
</body>
</html>
实现效果：
<!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>Document</title>
</head>
<body>
<style>
tr {
width: 700px;
height: 60px;
}
td,
.input1 {
width: 120px;
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 class="tfirst">
<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 = '' })
}
//创建全选框、反选框
//创建第一行最后一个全选td到tfirst中
var tdall = document.createElement('td');
var tfirst = document.querySelector('.tfirst');
tfirst.appendChild(tdall);
tdall.classList.add('tdall');
//在tfirst中加入全选和反选的input框
var inputall = document.createElement('input');
inputall.classList.add('inputall');
tdall.innerHTML = '全选/反选'
tdall.appendChild(inputall);
inputall.type = 'checkbox';//全选
var inputnone = document.createElement('input');
inputnone.classList.add('inputnone');
tdall.appendChild(inputnone);
inputnone.type = 'checkbox';//反选
//添加按钮--把内容添加到表格中
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);
//创建单个勾选框
//创建一个td，添加到tr中
var tdlast2 = document.createElement('td');
tdlast2.classList.add('tdlast2');
tr.appendChild(tdlast2);
// //添加一个input框在tdlast2中
var inputlast = document.createElement('input');
inputlast.classList.add('inputlast');
tdlast2.appendChild(inputlast);
//在inputlast中设置属性为checkbox或者radio
inputlast.type = 'checkbox';
// 给全选框绑定点击事件，当点击全选框时，每个单选框都自动被选中
inputall.onclick = function () {
var inputlastAll = document.querySelectorAll('.inputlast');
inputlastAll.forEach((el) => {
if (inputall.checked) {
el.checked = 'checked';
} else {
el.checked = '';
}
})
}
// 给反选框绑定点击事件，当点击反选框时，每个单选框都自动不被选中
inputnone.onclick = function () {
let inputlastAll = document.querySelectorAll('.inputlast');
inputlastAll.forEach((el) => {
console.log(el);
if (!inputnone.checked) {
el=inputlast;
} else {
el.checked = '';
}
})
}
//创建删除按钮，在网页中命名为删除，把其类名改为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 - 2) || (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) && (index != tdchange.length - 2)) {
var text = el.innerHTML;
el.innerHTML = "";
var input1 = document.createElement("input");
input1.classList.add('input1');
input1.value = text;
el.appendChild(input1);
}
})
}
}
};
</script>
</body>
</html>
