<script>// 获取元素const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const tbody = document.querySelector('tbody')// 获取带有name属性的元素，用于后面的表单验证const items = document.querySelectorAll('[name]')// 首先声明一个空数组，增删改与渲染都在这里面进行const arr = []// 1.录入模块// 1.1表单提交事件const info = document.querySelector('.info')info.addEventListener('submit', function (e) {// 表单事件点击后会跳转，要阻止这个默认行为e.preventDefault()// console.log(11)// 此处进行表单验证，不通过则不创建对象生成表格// 先遍历循环for (let i = 0; i < items.length; i++) {if (items[i].value === '') {return alert('输入的内容不能为空')}}// 创建新的对象const obj = {stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,city: city.value,salary: salary.value}// console.log(obj)// 追加到数组里arr.push(obj)// console.log(arr)// 重置表单this.reset()render()})// 渲染函数function render() {// 清空之前的tbody，只对最新数组进行渲染tbody.innerHTML = ''// 遍历arr数组for (let i = 0; i < arr.length; i++) {// 生成tr(表格)const tr = document.createElement('tr')tr.innerHTML = `<tr><td>${arr[i].stuId}</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:" data-id = ${i}>删除</a></td></tr>`// 追加元素tbody.appendChild(tr)}}// 3.删除操作tbody.addEventListener('click', function (e) {if (e.target.tagName == 'A') {// 得到当前的自定义属性 data - idconsole.log(e.target.dataset.id)// 删除arr里对应的数组arr.splice(e.target.dataset.id, 1)render()}})</script>
