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

学生信息表

news 文章来源：https://blog.csdn.net/qq_50582468/article/details/129444288 2024/12/16 3:05:16

目录

一、功能说明

二、核心思想

三、所用知识回顾

四、基本框架

五、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

EXCEL职业版本（3）

Excel职业版本&#xff08;3&#xff09; 公式与函数 运算符 算数运算符 关系运算符 地址的引用 相对引用&#xff1a;你变它就变&#xff0c;如影随形 A2&#xff1a;A5 绝对引用&#xff1a;以不变应万变 $A$2 混合引用&#xff1a;识时务者为俊杰&#xff0c;根据时…...

编程日记 2023/3/11 8:51:24

查找Pycharm跑代码下载模型存放位置以及有关模型下载小技巧（model_name_or_path参数）

目录一、前言二、发现问题三、删除这些模型方法一&#xff1a;直接删除注意方法二&#xff1a;代码删除一、前言 当服务器连不上&#xff0c;只能在本地跑代码时需要使用***预训练语言模型进行处理 免不了需要把模型下载到本地 时间一长就会发现C盘容量不够 二、发现问题 正…...

编程日记 2023/3/11 8:49:13

JS学习笔记day04

今日内容 零、 复习昨日 一、事件 二、DOM操作 三、案例 零、 复习昨日 js 脚本语言,弱类型 引入方案: 3种 js的内容: 语法dombom 语法 变量 var 数据类型 引用类型 - 对象,JSON {key:value,key:value} 数组 var arr new Array();var arr [1,2];下标取值赋值pop() s…...

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

异步控制流程 遍历篇

文章目录基础方法onlyOnce 只执行一次&#xff0c;第二次报错once 只执行一次&#xff0c;第二次无效iteratorSymbol 判断是否具有迭代器并返回迭代器arrayEach 普通数组遍历baseEach 对象类型遍历symbolEach 具有迭代器类型遍历异步遍历each异步控制流程的目的&#xff1a; 对…...

编程日记 2023/3/11 8:47:04

ICASSP 2023论文模型开源｜语音分离Mossformer

人类能在复杂的多人说话环境中轻易地分离干扰声音&#xff0c;选择性聆听感兴趣的主讲人说话。但这对机器却不容易&#xff0c;如何构建一个能够媲美人类听觉系统的自动化系统颇具挑战性。 本文将详细解读ICASSP2023本届会议收录的单通道语音分离模型Mossformer论文&#xff0…...

编程日记 2023/3/11 8:46:00

vs2019 更改工程项目名称

本地 解决方案所在的位置为&#xff1a;D:\Projcet 解决方案名称&#xff1a;hello.sln 位置&#xff1a;D:\Projcet\hello.sln 工程项目名称&#xff1a;test 位置&#xff1a;D:\Projcet\test (文件夹中包含头文件&#xff0c;源文件) 工程包含的文件&#xff1a; fun.h …...

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

FusionCompute安装和配置步骤

1. 先去华为官网下载FusionCompute的镜像 下载地址&#xff1a;https://support.huawei.com/enterprise/zh/distributed-storage/fusioncompute-pid-8576912/software/251713663?idAbsPathfixnode01%7C22658044%7C7919788%7C9856606%7C21462752%7C8576912 下载后放在D盘中&am…...

编程日记 2023/3/11 8:43:51

makefile 参数和基本使用

make 常用选项make[-f file] [options] [target]make 默认在当前目录中查找GUNmakefile、makefile 及 Makefile 文件作为make的输入文件-f 指定文件作为输入文件-v 显示版本号-n 只输出命令不执行&#xff0c; 一般作为测试-s 执行命令不显示命令&#xff0c;-w 显示执行前和执…...

编程日记 2023/3/11 8:42:49

golang 占位符还傻傻分不清？

xdm &#xff0c;写 C/C 语言的时候有格式控制符&#xff0c;例如 %s , %d , %c , %p 等等 在写 golang 的时候&#xff0c;也是有对应的格式控制符&#xff0c;也叫做占位符&#xff0c;写这个占位符&#xff0c;需要有对应的数据与之对应&#xff0c;不能瞎搞 基本常见常用…...

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

manacher算法详解

例题 求一个字符串的最长回文子串的长度 O(N2)O(N^2)O(N2)的解法很容易想&#xff0c;就是从每个字符位置向左右同时拓展&#xff0c;然后检查当前是不是回文&#xff0c;更新长度&#xff0c;可以简单写一下代码 int solve(string &ss){int ans 0;int n ss.length();s…...

编程日记 2023/3/11 8:40:40

微信公众号可以做微网站/微商引流推广

前言 作者简介&#xff1a;热爱跑步的恒川&#xff0c;正在学习C/C、Java、Python等。 本文收录于C语言进阶系列&#xff0c;本专栏主要内容为数据的存储、指针的进阶、字符串和内存函数的介绍、自定义类型结构、动态内存管理、文件操作等&#xff0c;持续更新&#xff01; 相关…...

编程日记 2024/12/15 22:34:33

网站框架文案/在线葡京在线葡京

loadrunner录制脚本出现汉子字体乱码的现象&#xff0c;很明显这个字体不是utf-8编码。那么怎么修改呢&#xff1f; 编码一般在工具菜单栏中&#xff0c;点击工具--》录制选项&#xff1a; 选择http属性--》字符集改成utf-8即可&#xff1b;...

编程日记 2024/12/15 20:30:37

北京装饰公司一览表/推广seo网站

题目描述 输入 输出 样例输入 1 3 4 4 Q 1 1 1 1 Q 1 1 3 2 M 1 1 3 Q 1 1 3 4样例输出 2 21 55提示 【题意】 给定一个矩阵&#xff0c;元素是行纵之和&#xff0c;Q a b c d 是查询以这4个数对角的矩阵和&#xff0c;M a b c是将a b坐标的元素赋值为c。 【思路】 记录前缀和 …...

编程日记 2024/12/15 19:52:41

西宁市建设委员会网站/长沙竞价优化

ftp上传工具下载&#xff0c;FTP是一种文件传输下载方式&#xff0c;它是TCP/IP协议栈的一部分&#xff1b;其中FTP又由两部分组成&#xff0c;一部分是FTP的服务器&#xff0c;另一部分是FTP的客户端&#xff01;它能够高效安全地进行文件传输下载操作&#xff01;可以使用服务…...

编程日记 2024/12/15 19:09:37

lol小米和谁做的视频网站/站长seo

1.蒋金楠&#xff0c;网名Artech的博客 [原创]我的WCF之旅&#xff08;1&#xff09;&#xff1a;创建一个简单的WCF程序[原创]我的WCF之旅&#xff08;2&#xff09;&#xff1a;Endpoint Overview[原创]我的WCF之旅&#xff08;3&#xff09;&#xff1a;在WCF中实现双向通信…...

编程日记 2024/12/15 16:52:37

wordpress login插件/找培训机构的网站

C语言N03算法与程序基本结构4学时2学时精选第三章 算法与程序基本结构 本章课程共6学时 其中&#xff1a;授课4学时&#xff0c;上机2学时 3.1 算法和算法的表示 程序的两个主要构件 算法的概念 算法的表示 3.2 三种基本结构 3.3 结构化程序设计 3.4 分支和循环结构的C语言程序…...

编程日记 2024/12/15 13:59:40