- A+
所属分类：Web前端
实现简单的信息录入系统：
<!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: 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 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.appendChild(inputall); inputall.type = 'checkbox'; // inputall.checked = 'checked';打开此注释，为已选中状态，取消选中时，其他的按钮都选中，可实现反选 // console.log(inputall.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); //创建单个勾选框 //创建一个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 != 'checked') {//或条件改为：inputall.value =='on' el.checked = 'checked'; } else { el.checked = ''; console.log(inputall.value); } }) } //创建删除按钮，在网页中命名为删除，把其类名改为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、全部勾选和部分勾选
