js实现学生信息表案例--详细教程
目录
一、页面展示
二、代码分析
三、 全部代码
一、页面展示
二、代码分析
html和css的样式 属于基本操作,分析只讲 js开始
说明: 这个案例,减少了dom操作,采取操作数据的形式,增加和删除都是针对于数组的操作,然后根据数据渲染页面。
核心思路:
1. 声明一个空的数组
2.点击录入,根据相关数据,生成对象,追加到数组里面
1. 首先取消表单默认提交事件
2.创建新的对象,里面存储 表单获取过来的数据
3. 追加给数组
4.渲染数据。遍历数组,动态生成tr,里面填写对应的td数据,并追加给tbody
5.重置表单
6.注意防止多次生成多条数据,先清空
3.根据数组数据渲染页面-表格的 行
4.点击删除按钮,删除的是对应数组里面的数据
1. 采用事件委托形式,给tbody 注册点击事件
2.点击链接,要删除的是对应数组里面的这个数据,而不是删除dom节点,如何找到这个数据?
3.前面渲染数据的时候,动态给a链接添加自定义属性 data-id = "0",这样点击当前对象就知道索引号了
4.根据索引号,利用splice 删除这条数据
5.重新渲染
5.再次根据数组的数据,渲染页面
6. 非空判断-- 点击新增需要验证表单
1.获取所有需要填写的表单,他们共同特点都有name属性
2.遍历这些表单,如果有一个值为空,则return 返回提示输入为空中断程序
3.注意书写的位置,应该放到新增数据的前面,阻止默认行为的后面
三、 全部代码
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, .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;
}
html代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名:<input type="text" class="uname" name="uname" />年龄:<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资:<input type="text" class="salary" name="salary" />就业城市:<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><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)// 4. 这里进行表单验证 如果不通过,直接中断,不需要添加数据// 先遍历循环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,salary: salary.value,city: city.value,}// console.log(obj)// 追加到数组里面arr.push(obj)//清空表单 重置this.reset() // this === info//调用渲染函数render()})//2. 渲染函数 因为增加和删除都需要渲染function render() {// 先清空tbody ,把最新数组里面的数据渲染完毕tbody.innerHTML = ''// 遍历arr数组for (let i = 0; i < arr.length; i++) {//生成trconst tr = document.createElement('tr')tr.innerHTML = `<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>`// 追加元素 父元素.appendChild(子元素)tbody.appendChild(tr)}}//3. 删除操作//3.1 事件委托 tbodytbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 得到当前元素的 自定义属性 data-idconsole.log(e.target.dataset.id);//删除 arr 数组里面对应的数据arr.splice(e.target.dataset.id, 1)console.log(arr)//重新渲染一次render()}})</script>
</body></html>
js实现学生信息表案例--详细教程相关推荐
- JS7day(事件对象,事件流,事件捕获和冒泡,阻止事件流动,事件委托,学生信息表案例)
文章目录 事件对象 获取事件对象 部分常用属性 事件流 事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...
- 页面显示格式化的时间、倒计时效果、学成在线案例(创建、添加节点)、学生信息表(重点)、5秒钟之后跳转页面(location.href应用)、学生信息表(页面刷新数据不丢失)(重点)——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
- javascript+css学生信息表综合案例(附详细代码)
本文主要实现:通过获取input框value值,并将数据渲染到表格中,自动生成对应的学生信息表,同时可以删除相应的信息. <!DOCTYPE html> <html lang=&qu ...
- 学生信息表 -通过选择年级和班级得到详细的学生信息名单
功能: 通过选择年级和班级得到详细的学生信息名单 知识点: 1. A inner join B on A.id=B.id的应用 Inner Join 逻辑运算符返回满足第一个(顶端)输入与第二 ...
- JavaEE——SSM框架整合实现学生信息注册案例
目录 十.SSM框架整合实现学生信息注册案例 1. 创建06-ssm的web项目 2. 修改web.xml版本为4.0 3. 更新pom.xml文件 4. jdbc的属性文件和日志文件 5. appl ...
- 高一年级学生成绩表案例_便宜的教科书,高年级学生可以更好地获得
高一年级学生成绩表案例 最近在德克萨斯Linux节上 , Ross Reedstrom向我介绍了OpenStax . 我听说过很多开放式教育资源(OER),但不是特别的一种. 当然,这是我现在要遵循的 ...
- js实现学生信息输入表格
样式 <style>table {width: 100%;border-collapse: collapse;}th,td {border: 1px solid black;}</s ...
- 查询选修c语言课程的学生学号和姓名,数据库实验(学生信息表)
目录 数据库实验(学生信息表) 实验一 实验二 实验三 实验四 数据库实验(学生信息表) 实验一 创建数据库以及学生信息表.课程信息表.选课表 create Table student (Sno ch ...
- 怎么在mysql创建数据库怎么加入学号_数据库怎么创建学生信息表
语音内容: 大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 数据库创建学生信息表的方法是: 1.新建表:单击数据库"studentDb"前图标,然后右键&qu ...
最新文章
- PyTorch 按索引赋值
- php中的rand,预测PHP的rand()的输出
- 发发牢骚,觉得走c#这条路,不该太浮躁
- 新增或编辑保存时出错后,页面无法再次编辑
- k8s停止服务_Kubernetes 服务部署最佳实践(二) 如何提高服务可用性
- 基于JAVA+SpringBoot+Mybatis+MYSQL的社区物业管理系统
- HTTPS时代全面到来,你准备好了吗?
- [转载] Python程序输入一个字符串并查找总数的大写和小写字母
- 洛谷——P2613 【模板】有理数取余
- 计算机用户名中文改为英文,win10系统怎么更改user用户名中文为英文
- H264编码器性能测试
- 红帽linux 6.5下载地址,红帽linux系统下载|红帽linux(RHEL) v6.5 beta 官方版 - 软件下载 - 绿茶软件园|33LC.com...
- 推荐系统-推荐模型总结
- Contextual Transformer Networks for Visual Recognition
- 基于Java Web的房屋出租管理系统
- android自动夜间模式,Android实现日夜间模式的深入理解
- POJ - Frogs' Neighborhood(Havel-Hakimi)
- 目标跟踪:在视频序列中跟踪特定对象的位置和状态
- php管理员密码,PHPWIND得到管理员密码的方法.
- 通达信自动交易系统接口定义