JS:信息录入系统

javascript 文章 2022-07-20 10:09 0 全屏看文

实现简单的信息录入系统:

<!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、全部勾选和部分勾选

-EOF-