JS:信息录入系统

  • JS:信息录入系统已关闭评论
  • 27 次浏览
  • A+
所属分类:Web前端
摘要

  页面效果:    1、增加表单信息2、修改表达3、保存修改


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

<!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>

 

 

页面效果:

JS:信息录入系统

 

 

 

 

 实现功能:

1、增加表单信息

2、修改表达

3、保存修改

4、信息重置

5、删除录入信息

6、全部勾选和部分勾选