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

学生信息表

news 2026/3/23 11:07: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

Cogito-V1-Preview-Llama-3B长文本总结效果对比：技术论文与会议纪要

Cogito-V1-Preview-Llama-3B长文本总结效果对比&#xff1a;技术论文与会议纪要 面对动辄几十页的技术文档、冗长的会议记录&#xff0c;你是不是也常常感到头疼&#xff1f;信息量太大&#xff0c;关键点淹没在细节里&#xff0c;想要快速抓住核心&#xff0c;往往需要花费大…...

编程新知 2026/3/23 10:20:03

洋葱这都啥问题啊？

洋葱问题一、伪人现象严重目前“洋葱”有不少伪人。它们集中于各大试炼场与不知名班级&#xff0c;人人不漏面&#xff0c;神神秘秘。 1. 伪人在哪里&#xff1f; 可以去“我的—我的班级”里添加班级&#xff0c;建议随机填写六个数字&#xff0c;其中“555553”特别厉害&…...

编程新知 2026/3/23 10:16:02

手把手教你用JSON管理多平台密钥：Hugo部署到Vercel的GitHub Secrets最佳实践

结构化密钥管理&#xff1a;用JSON统一管控多平台部署凭证的工程实践 在团队协作的静态网站部署场景中&#xff0c;密钥管理往往成为最脆弱的环节。当项目需要同时对接Vercel、Netlify等多个平台时&#xff0c;分散的密钥存储方式不仅增加管理成本&#xff0c;更会带来安全风险…...

编程新知 2026/3/23 9:15:09

光伏系统设计避坑指南：用pvlib快速验证双面组件发电增益（附对比实验代码）

光伏系统设计避坑指南&#xff1a;用pvlib快速验证双面组件发电增益&#xff08;附对比实验代码&#xff09; 在光伏系统设计领域&#xff0c;双面组件正逐渐成为行业新宠。与传统单面组件相比&#xff0c;双面组件能够同时利用正面和背面的入射光&#xff0c;理论上可提升5%-3…...

编程新知 2026/3/23 8:40:18

Altium Designer覆铜三大实战方法与工程配置指南

1. Altium Designer覆铜技术实践指南 覆铜&#xff08;Copper Pour&#xff09;是PCB Layout中一项基础却极易被低估的关键操作。它不仅影响板子的电气性能、热管理与EMC表现&#xff0c;更直接关系到制造良率与长期可靠性。在Altium Designer&#xff08;以下简称AD&#xff0…...

编程新知 2026/3/23 7:43:58

刷题笔记:力扣第28题-找出字符串中第一个匹配项的下标

1.拿到题目首先想到的就是暴力匹配法&#xff0c;遍历haystack字符串&#xff0c;当找到与needle第一个字符相同的字符时进入内部循环&#xff0c;判断后续的字符是否都匹配&#xff0c;如果匹配则返回下标值&#xff0c;如果不匹配则break&#xff0c;继续遍历。2.基于以上思想…...

编程新知 2026/3/23 7:37:56

CoPaw与知识图谱融合：构建智能问答与决策支持系统

CoPaw与知识图谱融合&#xff1a;构建智能问答与决策支持系统 1. 为什么需要结合大模型与知识图谱&#xff1f; 想象一下&#xff0c;你正在向一位经验丰富的金融分析师咨询某只股票的投资价值。理想情况下&#xff0c;这位专家既能快速理解你的问题意图&#xff0c;又能准确…...

编程新知 2026/3/23 6:13:22

深入YOLOv12网络结构：基于Transformer的Backbone设计与实现解析

深入YOLOv12网络结构&#xff1a;基于Transformer的Backbone设计与实现解析 最近在目标检测领域&#xff0c;YOLO系列的新成员YOLOv12又带来了不少新东西。如果你已经熟悉了YOLOv5、v8这些基于CNN的架构&#xff0c;可能会好奇&#xff0c;当YOLO遇上Transformer会擦出什么火花…...

编程新知 2026/3/23 5:47:08

应用统计期末考试复习总结-（江农版）

本文习题来自江农学习通考试后台原题型 完整版习题和标准答案 请在评论区留言 ​添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; ​编辑​添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;添加图片注释&#xff0c;不超过 140 字&…...

编程新知 2026/3/23 5:26:59

Hunyuan-MT-7B效果展示：蒙古语→汉语政策文件翻译术语统一性与政治准确性

Hunyuan-MT-7B效果展示&#xff1a;蒙古语→汉语政策文件翻译术语统一性与政治准确性 1. 模型核心能力概览 Hunyuan-MT-7B是业界领先的翻译大模型&#xff0c;专门针对多语言互译场景进行了深度优化。该模型支持33种语言的高质量互译&#xff0c;特别在民汉语言翻译方面表现出…...

编程新知 2026/3/23 3:56:06