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

动态表格html

article 2026/4/28 18:43:08

题目：
要求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓 名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底 色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。

要点：（原理）

  1. 通过.value获取表单内容，再用innerHTML和添加节点，新增到表单上。
  2. 通过获取删除按钮，绑定事件，进行remove删除节点，不要忘记把新增的内容也获取过来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}/* a{color: rgb(247, 4, 4);display: inline-block;} */table {border-collapse: collapse;width: 800px;margin: 0 auto;border-spacing: 20px;text-align: center;padding: 10px;}.add {cursor: pointer;}a {color: pink;display: inline-block;}tbody tr:nth-child(odd) {background-color: black;color: white;}tbody tr:nth-child(even) {background-color: white;color: black;}thead tr:nth-child(1) {background-color: greenyellow;color: black;}tr {height: 40px;}.popup {display: none;background-color: whitesmoke;border-radius: 10px;width: 300px;height: 350px;position: absolute;top: 0px;left: 40%;}</style>
</head>
<body><table border="1"><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>二级学院</th><th>班级</th><th>专业</th><th>辅导员</th><th class="add"><a href="#">添加</a></th></tr></thead><tbody><tr><td>24250101</td><td>小蓝</td><td>女</td><td>计算机专业</td><td>一班</td><td>物联网专业</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250102</td><td>游乐王子</td><td>男</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250103</td><td>玲珑</td><td>女</td><td>计算机专业</td><td>二班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250104</td><td>严莉莉</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250105</td><td>美琪</td><td>女</td><td>计算机专业</td><td>三班</td><td>物联网工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250106</td><td>美雪</td><td>女</td><td>计算机专业</td><td>三班</td><td>物联网工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250107</td><td>小月</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250108</td><td>石小龙</td><td>男</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>学校老师</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250109</td><td>方珍妮</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>学校老师</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250110</td><td>魔仙小千</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr></tbody></table><!-- 添加表单弹出框 --><div class="popup" id="addPopup"><div class="popup-content"><!-- <span class="close" id="closeAddPopup">&times;</span> --><form id="addForm"><label for="studentId">学号:</label><input type="text" id="studentId" name="studentId"><br><br><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="gender">性别:</label><select id="gender" name="gender"><option value="男">男</option><option value="女">女</option></select><br><br><label for="college">二级学院:</label><input type="text" id="college" name="college"><br><br><label for="class">班级:</label><input type="text" id="class" name="class"><br><br><label for="major">专业:</label><input type="text" id="major" name="major"><br><br><label for="counselor">辅导员:</label><input type="text" id="counselor" name="counselor"><br><br><input type="submit" value="提交" class="ok"></form></div></div> 
</body><script>const add = document.querySelector('.add')const popUp = document.querySelector('.popup')const addForm = document.querySelector('#addForm')add.addEventListener('click',function() {popUp.style.display = 'block';})addForm.addEventListener('submit',function(e) {e.preventDefault()const studentId = document.querySelector('#studentId').valueconst name = document.querySelector('#name').valueconst gender = document.querySelector('#gender').valueconst college = document.querySelector('#college').valueconst Class = document.querySelector('#class').valueconst major = document.querySelector('#major').valueconst counselor = document.querySelector('#counselor').valueconst tableBody = document.querySelector('tbody')const newText = document.createElement('tr')newText.innerHTML = `<td>${studentId}</td><td>${name}</td><td>${gender}</td><td>${college}</td><td>${Class}</td><td>${major}</td><td>${counselor}</td><td><a href="#" class="del">删除</a></td>`popUp.style.display = 'none';tableBody.appendChild(newText)const dels = document.querySelectorAll('.del')dels.forEach(function(button){button.addEventListener('click',function(e) {e.preventDefault()if(confirm('你确定要删除吗？')) {let All = this.parentNode.parentNodeAll.parentNode.removeChild(All)}})})})</script>
</html>

视频演示：

动态表格

相关文章：

动态表格html

题目&#xff1a; 要求&#xff1a; 1.表格由专业班级学号1-10号同学的信息组成&#xff0c;包括&#xff1a;学号、姓 名、性别、二级学院、班级、专业、辅导员&#xff1b; 2.表格的奇数行字体为黑色&#xff0c;底色为白色&#xff1b;偶数行字体为白色&#xff0c;底 色为黑…...

编程日记 2026/4/2 4:09:11

通过k8s请求selfsubjectrulesreviews查询权限

当前是通过kubelet进行查询 curl --cacert /etc/kubernetes/pki/ca.crt \ --cert /var/lib/kubelet/pki/kubelet-client-current.pem \ --key /var/lib/kubelet/pki/kubelet-client-current.pem \ -d - \ -H "Content-Type: application/json" \ -H Accept: applicat…...

编程日记 2026/3/2 5:30:20

Leetcode 3447. Assign Elements to Groups with Constraints

Leetcode 3447. Assign Elements to Groups with Constraints 1. 解题思路2. 代码实现 题目链接&#xff1a;3447. Assign Elements to Groups with Constraints 1. 解题思路 这一题的话思路上我是预先算出可能数字对应的element&#xff0c;然后只要一次query就行了。 而至…...

编程日记 2026/4/7 20:24:52

Ollama + AnythingLLM + Deepseek r1 实现本地知识库

1、Ollama&#xff1a;‌是一个开源的大型语言模型 (LLM)服务工具&#xff0c;旨在简化在本地运行大语言模型的过程&#xff0c;降低使用大语言模型的门槛‌。 2、AnythingLLM&#xff1a;是由Mintplex Labs Inc. 开发的一款全栈应用程序&#xff0c;旨在构建一个高效、可定制、…...

编程日记 2026/4/17 11:48:34

Prompt逆向工程:如何“骗“大模型吐露其Prompt?

提示词的“逆向工程”&#xff0c;让AI大语言模型帮你反推提示词 一、前言 在日常生活中&#xff0c;我们不时会遇到一些令人惊艳的文本&#xff0c;不论是一篇精彩绝伦的小说、一篇深入浅出的科普文章&#xff0c;还是一篇充满热情的音乐推荐&#xff0c;它们都能在我们的心…...

编程日记 2026/3/26 16:15:33

Deepseek-v3 / Dify api接入飞书机器人go程序

准备工作 开通了接收消息权限的飞书机器人&#xff0c;例如我希望用户跟飞书机器人私聊&#xff0c;就需要开通这个权限&#xff1a;读取用户发给机器人的单聊消息 im:message.p2p_msg:readonly准备好飞书机器人的API key 和Secretdeepseek-v3的api keysecret&#xff1a;http…...

编程日记 2026/4/16 20:28:03

【docker】Failed to allocate manager object, freezing:兼容兼容 cgroup v1 和 v2

参考大神让系统同时兼容 cgroup v1 和 v2 要解决你系统中只挂载了 cgroup v2 但需要兼容 cgroup v1 的问题，可以通过以下几步来使系统同时兼容 cgroup v1 和 cgroup v2。这样 Docker 和其他服务就可以正常工作了。步骤 1：更新 Grub 配置，启用兼容模式 编辑 GRUB 配置来启用同…...

编程日记 2026/3/12 2:45:37

详解策略模式

引言 实现一个目标往往有多种方式&#xff0c;比如从上海到北京&#xff0c;可以选择高铁、火车、飞机、自驾等等。同样实现一个功能我们可能也有多种方法&#xff0c;把这些方法封装为算法&#xff0c;根据不同的需求选择不同的算法&#xff08;策略&#xff09;&#xff0c;让…...

编程日记 2026/4/17 15:05:35

2025影视泛目录站群程序设计_源码二次开发新版本无缓存刷新不变实现原理

1. 引言 本设站群程序计书旨在详细阐述苹果CMS泛目录的创新设计与实现&#xff0c;介绍无缓存刷新技术、数据统一化、局部URL控制及性能优化等核心功能&#xff0c;以提升网站访问速度和用户体验。 2. 技术概述 2.1 无缓存刷新技术 功能特点&#xff1a; 内容不变性&#x…...

编程日记 2026/4/17 15:05:33

【RabbitMQ】RabbitMQ的下载安装及使用

安装RabbitMQ 下载网站&#xff1a;https://www.rabbitmq.com/docs/install-windows 点击后&#xff0c;会直接定位到依赖介绍位置&#xff0c;告诉你需要安装Erlang 下载Erlang Erlang也是一种编程语言&#xff0c;只是比较小众&#xff0c;但其拥有极为出色的性能 这个网站是…...

编程日记 2026/4/27 19:00:40

Stylelint 如何处理 CSS 预处理器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2026/4/18 13:50:23

Word中Ctrl+V粘贴报错问题

Word中CtrlV粘贴时显示“文件未找到&#xff1a;MathPage.WLL”的问题 Word的功能栏中有MathType&#xff0c;但无法使用&#xff0c;显示灰色。 解决方法如下&#xff1a; 首先找到MathType安装目录下MathPage.wll文件以及MathType Commands 2016.dotm文件&#xff0c;分别复…...

编程日记 2026/4/24 23:43:18

jmeter逻辑控制器9

1&#xff0c;简单控制器2&#xff0c;录制控制器3&#xff0c;循环控制器4&#xff0c;随机控制器5&#xff0c;随机顺序控制器6&#xff0c;if控制器7&#xff0c;模块控制器8&#xff0c;Include控制器9&#xff0c;事物控制器本文永久更新地址: 1&#xff0c;简单控制器 不…...

编程日记 2026/4/24 23:43:15

uniapp mqttjs 小程序开发

在UniApp中集成MQTT.js开发微信小程序时&#xff0c;需注意平台差异、协议兼容性及消息处理等问题。以下是关键步骤与注意事项的综合指南&#xff1a; 一、环境配置与依赖安装 安装MQTT.js 推荐使用兼容性较好的版本&#xff1a;mqtt4.1.0&#xff08;H5和小程序兼容性最佳&…...

编程日记 2025/10/23 14:24:33

GitHub Copilot Agent 模式系统提示词

系统提示词 你是一名 AI 编程助手。 当被问及你的名字时&#xff0c;你必须回答“GitHub Copilot”。请严格且完整地遵循用户的要求。 遵守微软内容政策。 避免涉及侵犯版权的内容。如果有人要求你生成有害、仇恨、种族主义、性别歧视、淫秽、暴力或与软件工程完全无关的内容&…...

编程日记 2026/4/27 19:57:33

【设计模式】【行为型模式】模板方法模式（Template Method）

&#x1f44b;hi&#xff0c;我不是一名外包公司的员工&#xff0c;也不会偷吃茶水间的零食&#xff0c;我的梦想是能写高端CRUD &#x1f525; 2025本人正在沉淀中… 博客更新速度 &#x1f4eb; 欢迎V&#xff1a; flzjcsg2&#xff0c;我们共同讨论Java深渊的奥秘 &#x1f…...

编程日记 2026/4/11 23:31:54

w200基于spring boot的个人博客系统的设计与实现

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;原创团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文…...

编程日记 2026/4/15 23:47:08

React 生命周期函数详解

React 组件在其生命周期中有多个阶段&#xff0c;每个阶段都有特定的生命周期函数&#xff08;Lifecycle Methods&#xff09;。这些函数允许你在组件的不同阶段执行特定的操作。以下是 React 组件生命周期的主要阶段及其对应的生命周期函数&#xff0c;并结合了 React 16.3 的…...

编程日记 2025/12/27 1:09:16

docker grafana安装

mkdir /root/grafana-storage chmod 777 -R /root/grafana-storage docker run -d -p 3000:3000 --namedocker-apisix-grafana-1 --network docker-apisix_apisix -v /root/grafana-storage:/var/lib/grafana grafana/grafana:9.1.0 浏览器访问&#xff1a; http://192.…...

编程日记 2026/4/11 2:48:30

H5+CSS+JS制作好看的轮播图

先来看效果 点击下方按钮可以做到平滑切换轮播&#xff0c;轮播图片可以根据自定义随心变化。 先来看一下页面代码结构 <div class"container"><div class"lunbo-wrap"><div id"slide"></div><div class"butto…...

编程日记 2026/4/13 8:54:59

aio-pika 快速上手（Python 异步 RabbitMQ 客户端）

目录 简介官方文档如何使用 简介 aio-pika 是一个 Python 异步 RabbitMQ 客户端。5.0.0 以前 aio-pika 基于 pika 进行封装&#xff0c;5.0.0 及以后使用 aiormq 进行封装。 https://github.com/mosquito/aio-pikahttps://pypi.org/project/aio-pika/ pip install aio-pika官…...

编程日记 2026/1/6 7:49:40

表单与交互：HTML表单标签全面解析

目录 前言 一.HTML表单的基本结构 基本结构 示例 二.常用表单控件 文本输入框 选择控件 文件上传 按钮 综合案例 三.标签的作用 四.注意事项 前言 HTML&#xff08;超文本标记语言&#xff09;是构建网页的基础&#xff0c;其中表单&#xff08;<form>&…...

编程日记 2026/4/23 12:28:59

非递减子序列(力扣491)

这道题的难点依旧是去重&#xff0c;但是与之前做过的子集类问题的区别就是&#xff0c;这里是求子序列&#xff0c;意味着我们不能先给数组中的元素排序。因为子序列中的元素的相对位置跟原数组中的相对位置是一样的&#xff0c;如果我们改变数组中元素的顺序&#xff0c;子序…...

编程日记 2025/11/21 5:17:35

Python基础-元组tuple的学习

在 Python 中&#xff0c;元组&#xff08;tuple&#xff09;是一种不可变的序列类型&#xff0c;允许存储不同类型的元素。元组非常类似于列表&#xff08;list&#xff09;&#xff0c;但与列表不同的是&#xff0c;元组一旦创建&#xff0c;就不能修改其内容。 1 元组的创建…...

编程日记 2026/4/9 10:40:14

Vue与Konva：解锁Canvas绘图的无限可能

前言 在现代Web开发中&#xff0c;动态、交互式的图形界面已成为提升用户体验的关键要素。Vue.js&#xff0c;作为一款轻量级且高效的前端框架&#xff0c;凭借其响应式数据绑定和组件化开发模式&#xff0c;赢得了众多开发者的青睐。而当Vue.js邂逅Konva.js&#xff0c;两者结…...

编程日记 2026/4/9 18:39:45

如何修改DNS解析?

DNS(域名系统)就像互联网的“电话簿”&#xff0c;负责将我们输入的网址转换为计算机能够理解的IP地址。如果DNS解析出现问题&#xff0c;访问网站就会受到影响。那我们该如何修改DNS解析呢?接下来&#xff0c;我们就来介绍一下这个话题。 为什么要修改DNS解析? 使用默认的…...

编程日记 2025/9/20 21:56:06

go语言文件和目录

打开和关闭文件 os.Open()函数能够打开一个文件&#xff0c;返回一个*File 和一个 err。操作完成文件对象以后一定要记得关闭文件。 package mainimport ("fmt""os" )func main() {// 只读方式打开当前目录下的 main.go 文件file, err : os.Open(".…...

编程日记 2026/4/21 13:43:06

Solidity09 Solidity构造函数和修饰器

文章目录 一、构造函数二、修饰器三、OpenZeppelin的Ownable标准实现四、Remix 演示示例五、代码示例 这一讲&#xff0c;我们将用合约权限控制&#xff08; Ownable&#xff09;的例子介绍 Solidity语言中构造函数&#xff08; constructor&#xff09;和独有的修饰器&…...

编程日记 2026/4/9 20:14:53

ES6 Map 数据结构是用总结

1. Map 基本概念 Map 是 ES6 提供的新的数据结构&#xff0c;它类似于对象&#xff0c;但是"键"的范围不限于字符串&#xff0c;各种类型的值&#xff08;包括对象&#xff09;都可以当作键。Map 也可以跟踪键值对的原始插入顺序。 1.1 基本用法 // 创建一个空Map…...

编程日记 2026/3/20 4:32:06

使用wpa_supplicant和wpa_cli 扫描wifi热点及配网

一&#xff1a;简要说明 交叉编译wpa_supplicant工具后会有wpa_supplicant和wpa_cli两个程序生产&#xff0c;如果知道需要连接的wifi热点及密码的话不需要遍历及查询所有wifi热点的名字及信号强度等信息的话&#xff0c;使用wpa_supplicant即可&#xff0c;否则还需要使用wpa_…...

编程日记 2026/4/21 15:39:46