东莞网站建设包装制品,江宁外贸网站建设,优化关键词排名推广,北京搜索引擎优化经理1、学生就业统计表 2、渲染业务
根据持久化数据渲染页面
步骤#xff1a;
①#xff1a;读取localstorage本地数据
如果有数据则转换为对象放到变量里面一会使用它渲染页面如果没有则用默认空数组[]为了测试效果#xff0c;可以先把initData存入本地存储看效果
②…1、学生就业统计表 2、渲染业务
根据持久化数据渲染页面
步骤
①读取localstorage本地数据
如果有数据则转换为对象放到变量里面一会使用它渲染页面如果没有则用默认空数组[]为了测试效果可以先把initData存入本地存储看效果
②根据数据渲染页面。遍历数组根据数据生成tr里面填充数据最后追加给tboby
提示可以利用map()和join()数组方法实现字符串拼接
渲染业务要封装成一个函数render使用map方法遍历数组里面更换数据然后返回有数据的tr数组通过join方法把map返回的数组转换为字符串把字符串通过innerHTML赋值给tbody
3、新增业务
点击新增按钮页面显示新的数据
步骤
①给form注册提交事件要阻止默认提交事件阻止默认行为 ②非空判断
如果年龄、性别、薪资有一个值为空则return返回’输入不能为空‘中断程序
③给arr数组追加对象里面存储表单获取过来的数据
④渲染页面和重置表单reset()方法
⑤把数组数据存储到本地存储里面利用JSON.stringify()存储为JSON字符串 4、删除业务
点击删除按钮可以删除对应的数据
步骤
①采用事件委托形式给tbody注册点击事件
②得到当前点击的索引号。渲染数据的时候动态给a链接添加自定义属性data-id0
③根据索引号利用splice删除数组这条数据
④重新渲染页面
⑤把最新arr数组存入本地存储
5、关于stuId的处理
思路
①新增加序号应该是最后一条数据的stuId 1
数组[数组的长度-1].stuId 1
②但是要判断如果没有数据则是直接赋值为1否则就采用上面的做法
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /title学生就业统计表/titlelink relstylesheet hrefcss/index.css /
/headbodyh1新增学员/h1form classinfo autocompleteoff姓名input typetext classuname nameuname /年龄input typetext classage nameage /性别: select namegender classgenderoption value男男/optionoption value女女/option/select薪资input typetext classsalary namesalary /就业城市select namecity classcityoption value北京北京/optionoption value上海上海/optionoption value广州广州/optionoption value深圳深圳/optionoption value曹县曹县/option/selectbutton classadd录入/button/formh1就业榜/h1!-- div classtitle共有数据span0/span条/div --tabletheadtrth学号/thth姓名/thth年龄/thth性别/thth薪资/thth就业城市/thth时间/thth操作/th/tr/theadtbody!-- trtd1/tdtd迪丽热巴/tdtd22/tdtd女/tdtd20000/tdtd上海/tdtd2099/9/9 08:08:08/tdtda hrefjavascript:i classiconfont icon-shanchu/i删除/a/td/tr --/tbody/tablescript// 参考数据const initData [{stuId: 1,uname: 迪丽热巴,age: 22,gender: 女,salary: 20000,city: 上海,time: 2099/9/9 08:08:08}]// localStorage.setItem(data,JSON.stringify(initData))// 1. 渲染业务// 1.1 先读取本地存储的数据// 1本地存储有数据则记得转换为对象然后存储到变量里面后期用于渲染页面// 2如果没有数据则用 空 数组来代替const arr JSON.parse(localStorage.getItem(data)) || []// 1.2 利用map和join方法来渲染页面const tbody document.querySelector(tbody)function render(){// (1) 利用map遍历数组返回对应tr的数组const trArr arr.map(function(ele,index){return trtd${ele.stuId}/tdtd${ele.uname}/tdtd${ele.age}/tdtd${ele.gender}/tdtd${ele.salary}/tdtd${ele.city}/tdtd${ele.time}/tdtda hrefjavascript: data-id{${index}}i classiconfont icon-shanchu/i删除/a/td/tr })console.log(trArr)// (2) 把数组转换为字符串 join// (3) 把生成的字符串追加给tbodytbody.innerHTML trArr.join()// 显示共计有几条数据// document.querySelector(.title span).innerHTML arr.length}render()// 2. 新增业务// 2.1 form表单注册提交事件阻止默认行为const info document.querySelector(.info)const uname document.querySelector(.uname)const age document.querySelector(.age)const salary document.querySelector(.salary)const gender document.querySelector(.gender)const city document.querySelector(.city)info.addEventListener(submit,function(e){// 阻止默认行为e.preventDefault()// 2.2 非空判断if(!uname.value || !age.value || !salary.value) {return alert(输入内容不能为空)}// 2.3 给arr数组追加对象里面存储 表单获取过来的数据arr.push({// 处理stuId 数组最后一条数据的stuId 1stuId: arr.length ? arr[arr.length -1].stuId 1 : 1,uname: uname.value,age: age.value,salary: salary.value,gender:gender.value,city:city.value,time: new Date().toLocaleString()})// 2.4 渲染页面和重置表单reset()方法render()this.reset() // 重置表单// 2.5 把数组重新存入本地存储里面记得转换为JSON字符串存储localStorage.setItem(data,JSON.stringify(arr))})// 3. 删除业务// 3.1 采用事件委托形式给tbody注册点击事件tbody.addEventListener(click, function(e){// 判断是否点击的是删除按钮if(e.target.tagName A){// alert(11)// 3.2 得到当前点击的索引号渲染数据的时候动态给a链接添加自定义属性例如data-id0console.log(e.target.dataset.id)// 确认框确认是否要删除if(confirm(您确定要删除这条数据嘛))// 3.3 根据索引号利用splice 删除数组这条数据arr.splice(e.target.dataset.id,1)// 3.4 重新渲染页面render()// 3.5 把最新arr数组存入本地存储localStorage.setItem(data,JSON.stringify(arr))}})/script
/body/html
CSS
* {margin: 0;padding: 0;box-sizing: content-box;
}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, .info select {width: 80px;height: 27px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;box-sizing: border-box;margin-right: 15px;
}
.info button {width: 60px;height: 27px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}
