本文实例为大家分享了JS实现用户管理系统的具体代码,供大家参考,具体内容如下
效果图:
html代码:
<h1>新增学员</h1> <div class="info"> 姓名:<input type="text" class="uname" /> 年龄:<input type="text" class="age" /> 性别: <select name="gender" id="" class="gender"> <option value="男">男</option> <option value="女">女</option> </select> 薪资:<input type="text" class="salary" /> 就业城市:<select name="city" id="" class="city" > <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> <option value="曹县">曹县</option> </select> <button class="add">录入</button> </div> <h1>就业榜</h1> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>薪资</th> <th>就业城市</th> <th>操作</th> </tr> </thead>
css代码:
* { margin: 0; padding: 0; } a { text-decoration: none; color:#721c24; } h1 { text-align: center; color:#333; margin: 20px 0; } table { margin:0 auto; width: 800px; border-collapse: collapse; color:#004085; } th { padding: 10px; background: #cfe5ff; font-size: 20px; font-weight: 400; } td,th { border:1px solid #b8daff; } td { padding:10px; color:#666; text-align: center; font-size: 16px; } tbody tr { background: #fff; } tbody tr:hover { background: #e1ecf8; } .info { width: 900px; margin: 50px auto; text-align: center; } .info input { width: 80px; height: 25px; outline: none; border-radius: 5px; border:1px solid #b8daff; padding-left: 5px; } .info button { width: 60px; height: 25px; background-color: #004085; outline: none; border: 0; color: #fff; cursor: pointer; border-radius: 5px; } .info .age { width: 50px; }
JS代码:
<script> // 获取元素 let tbody=document.querySelector(`tbody`) // 录入按钮 let add = document.querySelector(`.add`) let stuId=document.querySelector(`.stuId`) //编号 let uname=document.querySelector(`.uname`) //姓名 let age=document.querySelector(`.age`) //年龄 let gender=document.querySelector(`.gender`) //性别 let salary=document.querySelector(`.salary`)//薪资 let city=document.querySelector(`.city`) //所在地区 // 删除按钮 let del = document.querySelector(`.del`) // 保存数据 let arr = JSON.parse(localStorage.getItem(`key`)) || [] // 函数封装 function init(){ // 创建一个变量,用于拼接 let htmlStr=`` // 循环遍历 for(let i=0;i<arr.length;i++){ let index= i+1 // 拼接 htmlStr +=` <tr> <td>${index}</td> <td>${arr[i].uname}</td> <td>${arr[i].age}</td> <td>${arr[i].gender}</td> <td>${arr[i].salary}</td> <td>${arr[i].city}</td> <td> <a href="javascript:" class="del" id='${index}''>删除</a> </td> </tr> ` } // 将拼接的元素插入tbody tbody.innerHTML=htmlStr } // 调用函数 init() // 给录入按钮添加点击事件 add.addEventListener(`click`,function(){ // 判断输入框是否为空 if (uname.value.trim().length ==0){ alert(`请输入姓名`) return } if (age.value.trim().length ==0){ alert(`请输入年龄`) return } if (salary.value.trim().length ==0){ alert(`请输入薪资`) return } let obj={ //获取表单元素的value值, Id:arr.length>0?arr[arr.length-1].stuId+1 :1001, uname:uname.value, age:age.value, gender:gender.value, salary:salary.value, city:city.value, } // 将obj追加到数组的最后 arr.push(obj) // 渲染 init() // 每次录入清空输入框 uname.value=`` age.value=`` salary.value=`` // 存储数据 localStorage.setItem(`key`,JSON.stringify(arr)) }) // 实现数据删除 // 给tbody点击事件,事件委托 tbody.addEventListener(`click`,function(e){ // 获取删除按钮 if (e.target.className ==`del`){ // 指定删除arr数组 arr.splice(e.target.id-1,1) // 调用函数 init() } localStorage.setItem(`key`,JSON.stringify(arr)) }) </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。