javascript+css学生信息表综合案例（附详细代码）

本文主要实现：通过获取input框value值，并将数据渲染到表格中，自动生成对应的学生信息表，同时可以删除相应的信息。

<!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>学生信息录入界面</title><style>* {margin: 0;padding: 0;}.add_info {margin: 0 auto;width: 700px;height: 160px;text-align: center;background-color: antiquewhite;font-size: 14px;}h2 {line-height: 100px;}ul {list-style: none;/* 让ul居中 */margin: 0 auto;}li {display: inline;}.name {border: 1px solid skyblue;border-radius: 3px;width: 60px;margin-right: 20px;}.hobby{border: 1px solid skyblue;border-radius: 3px;width: 80px;margin-right: 20px;}.name:focus,.age:focus,.hobby:focus {outline: none;border: 1px solid deepskyblue;}.age {border: 1px solid skyblue;border-radius: 3px;width: 30px;margin-right: 20px;}.sub {background-color: deepskyblue;border: 1px solid white;border-radius: 3px;width: 40px;color:white;line-height: 20px;}.sub:hover {background-color: rgb(88, 88, 227);  }#hometown, #sex {margin-right: 10px;}table {border-spacing: 0;border: 1px solid #ccc;width: 700px;text-align: center;/* 让表格居中 */margin: 0 auto;border-top: 0;}.table_head {background-color: whitesmoke;}th {width: 100px;height: 30px;text-align: center;font-size: 13px;line-height: 15px;}td {border-spacing: 0;padding: 0;border: 1px solid #ccc;text-align: center;height: 30px;border-bottom: 0;border-left: 0;}a{text-decoration: none;color: #333;/* 清楚链接下划线与颜色 */}.table_body tr:hover {background-color: ghostwhite;}</style></head>
<body><div><div class="add_info"><h2>学生信息录入</h2><ul><li>姓名:<input class="name" type="text"></li><li>年龄:<input class="age" type="text"></li><li>性别: <select id="sex"><option value="男">男</option><option value="女">女</option></select></li><li>兴趣爱好:<input class="hobby" type="text"></li><li>家乡: <select id="hometown"><option value="上海">上海</option><option value="北京">北京</option><option value="武汉">武汉</option><option value="长沙">长沙</option><option value="南京">南京</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="杭州">杭州</option><option value="合肥">合肥</option><option value="天津">天津</option></select></li><li><button class="sub">录入</button></li></ul></div><div class="student_info"><table><thead><tr class="table_head"><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>兴趣爱好</th><th>家乡</th><th>选项</th></tr></thead><tbody class="table_body"></tbody></table></div></div><script>// 准备好数据后端let arr = [{stuId: 1001, uname: '丽丽', age: 19, gender: '女', hobby: '唱歌', hometown: '上海'},{stuId: 1002, uname: '亮亮', age: 20, gender: '男', hobby: '滑冰', hometown: '武汉'},{stuId: 1003, uname: '小蒋', age: 18, gender: '男', hobby: '街舞', hometown: '北京'},{stuId: 1004, uname: '芳芳', age: 21, gender: '女', hobby: '芭蕾', hometown: '长沙'},]// 获取父元素let table_body = document.querySelector('.table_body')// 添加按钮录入数据// 获取录入按钮let sub = document.querySelector('.sub')// 获取表单元素let name = document.querySelector('.name')let age = document.querySelector('.age')let sex = document.querySelector('#sex')let hobby = document.querySelector('.hobby')let hometown = document.querySelector('#hometown')// 渲染函数 把数组里的最新数据渲染到页面中function render(){// 先删掉tbody以前的数据再渲染新的数据table_body.innerHTML = ''          // 根据数据的条数来渲染增加 trfor(let i = 0; i < arr.length; i++){// 1、创建trlet tr = document.createElement('tr')// 2、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].hobby}</td><td>${arr[i].hometown}</td><td><a href="#" id="${i}">删除</a></td>`// 3、把tr追加到tbody 父元素.appendChild(子元素)table_body.appendChild(tr)// 渲染完后复原数据name.value = ''age.value = ''sex.value = '男'hometown.value  = '上海'}}render()sub.addEventListener('click',function(){// 获得表单里的值 把获取到的值追加到数组里面 arr.push()arr.push({//得到数组的最后一条数据的学号+1stuId: arr[arr.length - 1].stuId + 1,uname: name.value, age: age.value, gender: sex.value, hobby: hobby.value, hometown: hometown.value})// 渲染数据render()})// 删除操作 使用事件委托的方法 不用给每个元素都绑定点击事件// 删除的也是数组里面的数据table_body.addEventListener('click',function(e){// 只有当我们点击了a链接才会执行删除操作if ( e.target.tagName === 'A') {// 做删除操作，即删除数组里面的数据 arr.splice()// 怎么确定删除的数据是哪一个//  <a href="#" id="${i}">删除</a> 给a 加上索引号// console.log(e.target.id)arr.splice(e.target.id,1)render()}})</script></body>
</html>

效果图如下：

javascript+css学生信息表综合案例（附详细代码）相关推荐

Hive案例-学生成绩表综合案例
元数据: course数据: 1,数据库 2,数学 3,信息系统 4,操作系统 5,数据结构 6,数据处理 student数据: 95002,刘晨,女,19,IS 95017,王风娟,女,18,IS ...
【C语言】一个学生信息排序程序（学生信息表）【注释详细】【链表】
题目一.编写一个学生信息排序程序.要求: 1.可随时输入n个学生的信息和成绩(n不设置上限). 2.学生信息包括:学号.姓名.性别.专业.学院:三门课程成绩. 3.为用户提供一个排序选择列表,使得用 ...
Hive案例学生成绩表综合案例
首先给出各个表的数据 •表1 学生表 <学号,姓名,性别,年龄,系> - <Sno,Sname,Ssex,Sage,Sdepartment> 95001,李勇,男,20,CS ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
JS7day(事件对象，事件流，事件捕获和冒泡，阻止事件流动，事件委托，学生信息表案例)
文章目录事件对象获取事件对象部分常用属性事件流事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...
Web前端：JavaScript最强总结附详细代码（带常用案例！）
Web前端基础: Web前端:HTML最强总结附详细代码 Web前端:CSS最强总结附详细代码 Web前端:JavaScript最强总结附详细代码 Web前端工具: Web前端: JQuery最 ...
java计算机毕业设计ssm基于SSM学生信息管理系统37myx（附源码、数据库）
java计算机毕业设计ssm基于SSM学生信息管理系统37myx(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm ...
查询选修c语言课程的学生学号和姓名,数据库实验(学生信息表)
目录数据库实验(学生信息表) 实验一实验二实验三实验四数据库实验(学生信息表) 实验一创建数据库以及学生信息表.课程信息表.选课表 create Table student (Sno ch ...
怎么在mysql创建数据库怎么加入学号_数据库怎么创建学生信息表
语音内容: 大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 数据库创建学生信息表的方法是: 1.新建表:单击数据库"studentDb"前图标,然后右键&qu ...

javascript+css学生信息表综合案例（附详细代码）

javascript+css学生信息表综合案例（附详细代码）相关推荐

最新文章

热门文章