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

动态表格html

news 2025/11/4 10:49:07

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

要点：（原理）

通过.value获取表单内容，再用innerHTML和添加节点，新增到表单上。
通过获取删除按钮，绑定事件，进行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

相关文章：

动态表格html

ZU47DR 100G光纤高性能板卡

mysql8.0使用pxc实现高可用

Kotlin 使用 Chrome 无头浏览器

Arbess基础教程-创建流水线

vscode安装ESP-IDF

第31周：文献阅读

GenAI + 电商：从单张图片生成可动态模拟的3D服装

进程（1）

ChatGPT搜索免费开放：AI搜索引擎挑战谷歌霸主地位全面分析

hadoop之MapReduce：片和块

GitPuk快速安装配置教程(入门级)

在CT107D单片机综合训练平台上，8个数码管分别单独依次显示0~9的值，然后所有数码管一起同时显示0~F的值，如此往复。

深入浅出Java数组：从基础到高阶应用

基于 Nginx 的 CDN 基础实现

讲人话的理解ai学习原理

Spring boot整合quartz方法

网站改HTTPS方法

数据中台是什么？：架构演进、业务整合、方向演进

Java Stream API：高效数据处理的利器引言

Docker 离线安装指南

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

Java - Mysql数据类型对应

Module Federation 和 Native Federation 的比较

网络编程（UDP编程）

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

OD 算法题 B卷【正整数到Excel编号之间的转换】

【SpringBoot自动化部署】

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)