当前位置： 首页 > news >正文

学生信息表

news 2026/3/26 16:54:42

目录

一、功能说明

二、核心思想

三、所用知识回顾

四、基本框架

五、js功能实现部分

一、功能说明

（1）输入对应的信息，点击录入可以为下面的表格添加一条记录，注意当所填信息不完整时不允许进行提交。

（2）当点击删除记录的时候，对应的数据会从表中进行删除

二、核心思想

采取减少dom的操作，操作数据的形式，删除增加都是针对于数组

（1）声明一个空的数组

（2）点击录入，根据相关数据，生成都西昂，追加到数组中

（3）根据数组数据渲染页面-表格中的行

（4）点击删除按钮，删除数组中的对应数据

（5）再次根据数组中的数据，渲染页面

三、所用知识回顾

（1）阻止事件的默认行为  e.preventDefault()

（2）给数组增加元素 数组名.push(数据对象)

（3）从数组中删除数据  数组名.splice(从哪开始删，删几个)

（4）如何知道当前点击的是什么标签   e.target.tagName

（5）如何定义自定义属性  在标签中加入data-id='什么' ；用e.target.dataset.id获取自定义属性的id值

（6）如何创建结点  document.createElement（‘元素名’）

（7）如何给父元素追加结点   父元素.appendChild(要插入的元素)其为后插 ；父元素.insertBefore(要插入的元素)其为前插

（8）如何将内容渲染到标签中，用反引号``

四、基本框架

HTML部分

<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>
</body>

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;
}

五、js功能实现部分

 

<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=[]// 获取表单对象const info=document.querySelector('.info')// 监听表单提交事件info.addEventListener('submit',function(e){// 阻止表单的默认行为e.preventDefault()// 进行表单的验证,不过不通过直接中断,//方法,利用除了提交都有一个name属性,可以获取name,for循环如果有空则return结束 循环for(let i=0;i<items.length;i++){if(items[i].value===''){return}}// 创建对象，相当于每个学生const obj={stuId:arr.length+1,uname:uname.value,age:age.value,gender:gender.value,salary:salary.value,city:city.value}// 将对象追加给数组arr.push(obj)// console.log(arr)// 提交后清空表单this.reset()// // 调用渲染函数render()})// 渲染函数，因为删除和增加都需要渲染function render(){// 如果这样写，则每次都会把所有的arr中的数据在原来的基础上又重新加了一次//则应该每次渲染前把tbody清空tbody.innerHTML=''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>`// 将tr追加到父元素tbody中tbody.appendChild(tr)}}// 进行删除操作
//删除在a里面，但是有多个删除，每个都绑定事件麻烦，可以委托给父级元素，唯一可以表示的有tbody
//但是只有点击a的时候才会删除，所有需要if再判断一下点击的哪一个
tbody.addEventListener('click',function(e){if(e.target.tagName==='A'){// 如何知道当前想要删除的是哪条数据，可以用自定义属性，在生成a时// console.log(e.target.dataset.id)// 删除数组中对应的数据arr.splice(e.target.dataset.id,1)// 数组中元素少了则重新 渲染render()}
})</script>

相关文章：

学生信息表

目录 一、功能说明 二、核心思想 三、所用知识回顾 四、基本框架 五、js功能实现部分 一、功能说明 &#xff08;1&#xff09;输入对应的信息&#xff0c;点击录入可以为下面的表格添加一条记录&#xff0c;注意当所填信息不完整时不允许进行提交。 &#xff08;2&…...

编程日记 2023/3/11 9:13:47

FOTA在AUTOSAR中的应用

FOTA介绍 FOTA（Firmware Over-The-Air）移动终端的空中下载软件升级，指通过云端升级技术，为具有连网功能的设备：例如手机、平板电脑、便携式媒体播放器、移动互联网设备等提供固件升级服务，用户使用网络以按需、易扩展的方式获取智能终端系统升级包，并通过FOTA进行云端升…...

编程日记 2023/3/11 9:12:44

2023/3/10 Vue核心知识的学习- Vue - v-model双向绑定原理

https://www.jianshu.com/p/2682b5a26869 定义&#xff1a;vue中双向绑定就是指v-model指令&#xff0c;可以绑定一个响应式数据到视图&#xff0c;同时视图中变化能同步改变该值。 通过Object.defineProperty( )对属性设置一个set函数&#xff0c;当数据改变了就会来触发这个…...

编程日记 2023/3/11 9:11:36

面朝大海，春暖花开丨2023年Kaadas凯迪仕全国经销商大会成功召开

3月8日&#xff0c;We——2023年Kaadas凯迪仕全国经销商大会将在中国青岛星光岛会议中心隆重举行&#xff0c;盛会汇聚了超过1000名优秀合作伙伴&#xff0c;规模空前。Kaadas凯迪仕品牌创始人&集团总裁苏志勇先生、集团董事长苏祺云先生以及各高层领导均莅临现场。 大会伊…...

编程日记 2023/3/11 9:10:33

【ubuntu】安装cuda+anaconda的docker环境，并用Vscode远程访问

目录下载英伟达docker配置docker的基本安装环境为vscode安装ssh服务安装anaconda下载英伟达docker docker pull nvidia/cuda配置docker的基本安装环境 apt-get install sudo sudo apt-get update sudo apt-get install wget sudo ps -e|grep ssh为vscode安装ssh服务 sudo ap…...

编程日记 2023/3/11 9:09:26

Python（青铜时代）——容器类的公共方法

内置函数 内置函数&#xff1a;不需要使用 import 导入库&#xff0c;就可以直接使用的函数 函数描述备注len(&#xff09;计算容器中元素个数del( )删除变量max( )返回容器中元素最大值如果是字典&#xff0c;只针对key比较min( )返回容器中元素最小值如果是字典&#xff0c…...

编程日记 2023/3/11 9:08:23

利用canvas给图片添加水印

前言前两天给个人网站添加了一个小功能&#xff0c;就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能&#xff0c;也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实…...

编程日记 2023/3/11 9:07:20

保姆级使用PyTorch训练与评估自己的MobileViT网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;https://www.bilibili.co…...

编程日记 2023/3/11 9:06:16

Giscus，由 GitHub Discussions驱动的评论系统

在创建网站或博客时&#xff0c;许多人都希望能够为其内容提供评论功能&#xff0c;以与用户进行交流和互动。然而&#xff0c;实现这一点可能会非常复杂&#xff0c;需要处理许多不同的问题&#xff0c;如身份验证、反垃圾邮件、跨站脚本攻击等。为了帮助解决这些问题&#xf…...

编程日记 2023/3/11 9:05:13

【JSON文件解析】JSON文件

文章目录概要&#xff1a;本期主要介绍Qt解析JSON数据格式文件的方式。一、JSON数据格式1.JSON类似于XML&#xff0c;在JSON文件中&#xff0c;有且只有一个根节点2.JSON有两种主流包含型构造字符&#xff1a;{对象}、[数组]3.JSON的值主要包括&#xff1a;对象、数组、数字、字…...

编程日记 2023/3/11 9:04:09

OpenGL超级宝典学习笔记：纹理

前言 本篇在讲什么 本篇章记录对OpenGL中纹理使用的学习 本篇适合什么 适合初学OpenGL的小白 本篇需要什么 对C语法有简单认知 对OpenGL有简单认知 最好是有OpenGL超级宝典蓝宝书 依赖Visual Studio编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理…...

编程日记 2023/3/11 9:03:06

主辅助服务市场出清模型研究【旋转备用】（Matlab代码实现）

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5;&#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密…...

编程日记 2023/3/11 9:02:01

不用费劲，这5款效率工具为你解决学习工作烦恼

今天我要向大家推荐5款超级好用的效率软件&#xff0c;无论是在学习还是办公中都能够极大地提高效率。这些软件可以帮助你解决许多问题&#xff0c;而且每个都是真正的神器。 1.键盘仿真鼠标——NeatMouse NeatMouse 是一个小型的工具能够使用鼠标光标控制指针。当你的鼠标不…...

编程日记 2023/3/11 9:00:57

PostgreSQL 数据库大小写规则

PostgreSQL 数据库对大小写的处理规则如下&#xff1a; 严格区分大小写默认把所有 SQL 语句都转换成小写再执行加双引号的 SQL 语句除外 如果想要成功执行名称中带有大写字母的对象&#xff0c;则需要把对象名称加上双引号。 验证如下&#xff1a; 想要创建数据库 IZone&…...

编程日记 2023/3/11 8:58:48

【springmvc】执行流程

SpringMVC执行流程 原理图 1、SpringMVC常用组件 DispatcherServlet&#xff1a;前端控制器&#xff0c;不需要工程师开发&#xff0c;由框架提供 作用&#xff1a;统一处理请求和响应&#xff0c;整个流程控制的中心&#xff0c;由它调用其它组件处理用户的请求 HandlerMa…...

编程日记 2023/3/11 8:57:45

什么是AIGC？

目录前言一、什么是AIGC&#xff1f;1、什么是PGC&#xff1f;2、什么是UGC&#xff1f;3、什么是PUCG&#xff1f;4、什么是AIGC&#xff1f;二、总结前言 很明显&#xff0c;ChatGPT的爆火&#xff0c;带动了AIGC&#xff08;AI-Generated Content&#xff09;概念的火热。 …...

编程日记 2023/3/11 8:56:41

【深度强化学习】(2) Double DQN 模型解析，附Pytorch完整代码

大家好&#xff0c;今天和大家分享一个深度强化学习算法 DQN 的改进版 Double DQN&#xff0c;并基于 OpenAI 的 gym 环境库完成一个小游戏&#xff0c;完整代码可以从我的 GitHub 中获得&#xff1a; https://github.com/LiSir-HIT/Reinforcement-Learning/tree/main/Model 1…...

编程日记 2023/3/11 8:55:37

【正则表达式】正则表达式语法规则

正则表达式语法规则1.普通字符 字符描述[ABC]匹配 […] 中的所有字符[^ABC]匹配除了 […] 中字符的所有字符[A-Z][A-Z] 表示一个区间&#xff0c;匹配所有大写字母&#xff0c;[a-z] 表示所有小写字母.匹配除换行符以外的任意字符[\s\S]匹配所有。\s 是匹配所有空白符&#xf…...

编程日记 2023/3/11 8:54:35

1636_isatty函数的功能

全部学习汇总&#xff1a; GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 前面刚刚看完了一个函数和三个文件指针&#xff0c;一行代码懂了半行。但是继续分析我之前看到的代码还是遇到了困难&#xff0c;因为之前自己对于UNIX的一些基础知…...

编程日记 2023/3/11 8:53:32

基于Stackelberg博弈的光伏用户群优化定价模型(Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/3/11 8:52:27

除了Cesium和Mapbox，用three-tile+Three.js打造轻量级WebGIS的完整实践

用three-tileThree.js构建轻量级WebGIS的工程实践指南 在Web三维地图开发领域&#xff0c;Cesium和Mapbox长期占据主导地位&#xff0c;但它们"全家桶"式的架构往往成为灵活定制的桎梏。当项目需要精细控制渲染管线、深度集成业务逻辑或追求极致性能时&#xff0c;开…...

编程新知 2026/3/26 15:46:27

BthPS3驱动技术指南：实现PS3手柄在Windows 11系统的蓝牙适配与优化

BthPS3驱动技术指南&#xff1a;实现PS3手柄在Windows 11系统的蓝牙适配与优化 【免费下载链接】BthPS3 Windows kernel-mode Bluetooth Profile & Filter Drivers for PS3 peripherals 项目地址: https://gitcode.com/gh_mirrors/bt/BthPS3 当你尝试将PS3手柄连接到…...

编程新知 2026/3/26 15:44:27

别再死记硬背了！动态规划解回文问题的填表顺序与状态定义保姆级图解

动态规划解回文问题&#xff1a;从填表顺序到状态定义的思维重塑 第一次接触回文串的动态规划解法时&#xff0c;我盯着那个双重循环的填表顺序发呆了半小时——为什么i要从n-1开始倒着遍历&#xff1f;为什么j又要从i开始正着遍历&#xff1f;更让我困惑的是&#xff0c;dp[i…...

编程新知 2026/3/26 14:27:33

3个关键技巧彻底解决Photoshop WebP格式兼容性问题

3个关键技巧彻底解决Photoshop WebP格式兼容性问题 【免费下载链接】WebPShop Photoshop plug-in for opening and saving WebP images 项目地址: https://gitcode.com/gh_mirrors/we/WebPShop 在当今Web开发与设计领域&#xff0c;WebP格式已成为图像优化的黄金标准&am…...

编程新知 2026/3/26 13:26:57

2026年高性价比个人网盘盘点：告别“空间焦虑”，谁才是真正的效率神器？

在预算有限的情况下寻找个人网盘&#xff0c;大多数人的第一反应是打开计算器&#xff0c;算出“每 GB 只要几分钱”。但作为一个在存储行业摸爬滚打多年的老兵&#xff0c;我要告诉你一个反直觉的事实&#xff1a;对于 90% 的办公族和学生来说&#xff0c;网盘的“空间大小”是…...

编程新知 2026/3/26 11:29:56

Janus-Pro-7B基础教程：CFG权重与图像多样性/保真度平衡策略

Janus-Pro-7B基础教程&#xff1a;CFG权重与图像多样性/保真度平衡策略 1. 认识Janus-Pro-7B多模态模型 Janus-Pro-7B是一个强大的统一多模态AI模型&#xff0c;它不仅能理解图片内容&#xff0c;还能根据文字描述生成高质量的图像。这个模型有74亿参数&#xff0c;支持图像描…...

编程新知 2026/3/26 11:25:55

拥抱 Kotlin Multiplatform (KMP)：现代 Android 开发工程师的进阶之路与鸿蒙跨端实践

引言 移动应用生态正经历着深刻变革。用户期望在 Android、iOS 乃至新兴的鸿蒙 (HarmonyOS) 等不同平台上获得一致、流畅的体验。传统的原生开发模式（为每个平台单独开发）在实现这种一致性时，面临着开发效率低、维护成本高、代码复用率差等挑战。同时，Kotlin 语言凭借其简…...

编程新知 2026/3/26 11:07:38

华为光猫配置解密工具：技术原理与实战应用指南

华为光猫配置解密工具&#xff1a;技术原理与实战应用指南 【免费下载链接】HuaWei-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/hu/HuaWei-Optical-Network-Terminal-Decoder 华为光猫配置解密工具是一款专为网络运维人员设计的专业工…...

编程新知 2026/3/26 11:01:37

java毕业设计基于springboot铜仁一中学生成绩管理系统

前言 铜仁一中学生成绩管理系统是基于Java和Spring Boot框架开发的&#xff0c;目的是高效管理学生的成绩信息&#xff0c;为学校教学管理提供便利。通过该系统&#xff0c;教师可以方便地录入学生的各科考试成绩&#xff0c;学生和教师能够根据不同条件查询成绩&#xff0c;系…...

编程新知 2026/3/26 10:51:27

【笔试真题】- 小红书-2026.03.25-第二套

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 小红书-2026.03.25-第二套 题目一：A先生的用户数据整理 把每条记录的三个字段按类型识别出来即可：带小数点的是经验值，全小写字符串是用户名，剩下的整数就…...

编程新知 2026/3/26 10:43:25