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

WEB前端08-综合案例(动态表格)

news 2025/12/3 10:26:00

使用 HTML、CSS 和 JavaScript 创建动态表格

在本教程中，我们将创建一个动态表格，允许用户添加行、选择项目，并执行批量操作，如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分是如何协同工作的。

HTML 结构

我们的 HTML 文档设置了页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态表格</title><style>/* CSS 样式在这里 */</style>
</head>
<body><div class="container"><!-- 输入字段和添加按钮 --><div class="div_1"><input type="text" name="id" id="id" placeholder="请输入编号"><input type="text" name="name" id="name" placeholder="请输入用户名"><input type="text" name="sex" id="sex" placeholder="请输入性别"><input type="button" value="添加" id="bn_add"></div><!-- 表格显示学生信息 --><div class="div_2"><table><caption>学生信息表</caption><!-- 表头 --><tr onmouseover="doOver(this);" onmouseout="doOut(this);"><th><input type="checkbox" id="doChoose"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><!-- 示例数据行 --><tr onmouseover="doOver(this);" onmouseout="doOut(this);"><td><input type="checkbox" name="user"></td><td>1</td><td>张三</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr></table></div><!-- 操作按钮 --><div class="div_3"><input type="button" value="全选" id="chooseAll"><input type="button" value="全不选" id="chooseNull"><input type="button" value="反选" id="chooseFan"><input type="button" value="删除" id="deleteTable"></div></div><script>/* JavaScript 函数在这里 */</script>
</body>
</html>

HTML 元素说明

容器 Div:
- .container 类将所有元素包裹在一起，为其添加了内边距和阴影效果，使页面看起来更像卡片。
输入字段和按钮:
- .div_1 类包含 ID、姓名和性别的输入字段以及一个添加新行的按钮。
表格:
- 表格显示学生信息，包含选择框、编号、姓名、性别和操作列。每一行都有一个删除选项。
操作按钮:
- .div_3 类包含全选、全不选、反选和删除选中行的按钮。

CSS 样式

CSS 用于美化表格和输入字段。以下是 CSS 的简要说明：

body {font-family: Arial, sans-serif; /* 设置全局字体 */background-color: #f2f2f2; /* 设置背景颜色 */color: #333; /* 设置文本颜色 */margin: 0; /* 去除默认外边距 */padding: 20px; /* 设置页面内边距 */
}.container {width: 80%; /* 设置容器宽度 */margin: auto; /* 居中容器 */background: #fff; /* 背景颜色为白色 */padding: 20px; /* 添加内边距 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}.div_1 {text-align: center; /* 居中对齐内容 */margin-bottom: 20px; /* 添加下边距 */
}.div_1 input[type="text"] {padding: 10px; /* 添加内边距 */margin-right: 10px; /* 添加右边距 */border: 1px solid #ccc; /* 设置边框 */border-radius: 5px; /* 设置圆角边框 */
}.div_1 input[type="button"] {padding: 10px 20px; /* 添加内边距 */background-color: #007BFF; /* 背景颜色 */color: white; /* 文本颜色 */border: none; /* 去除边框 */border-radius: 5px; /* 设置圆角边框 */cursor: pointer; /* 设置鼠标样式 */
}.div_1 input[type="button"]:hover {background-color: #0056b3; /* 悬停时背景颜色变化 */
}table {width: 100%; /* 设置表格宽度 */border-collapse: collapse; /* 合并边框 */margin-bottom: 20px; /* 添加下边距 */
}table,
td,
th {border: 1px solid #ddd; /* 设置边框 */
}th,
td {padding: 12px; /* 添加内边距 */text-align: center; /* 居中对齐文本 */
}th {background-color: #007BFF; /* 表头背景颜色 */color: white; /* 表头文本颜色 */
}caption {font-size: 1.5em; /* 设置标题字体大小 */margin: 10px; /* 添加边距 */color: #007BFF; /* 设置标题颜色 */
}.div_3 {text-align: center; /* 居中对齐内容 */font-family: Arial, sans-serif; /* 设置字体 */color: #333; /* 设置文本颜色 */
}.div_3 input[type="button"] {padding: 10px 20px; /* 添加内边距 */margin: 5px; /* 添加边距 */background-color: #28a745; /* 背景颜色 */color: white; /* 文本颜色 */border: none; /* 去除边框 */border-radius: 5px; /* 设置圆角边框 */cursor: pointer; /* 设置鼠标样式 */
}.div_3 input[type="button"]:hover {background-color: #218838; /* 悬停时背景颜色变化 */
}tr:hover {background-color: #f1f1f1; /* 行悬停时背景颜色变化 */
}a {color: #007BFF; /* 链接颜色 */text-decoration: none; /* 去除下划线 */
}a:hover {text-decoration: underline; /* 悬停时添加下划线 */
}

关键 CSS 特性

容器样式:
- .container 类将内容居中，并添加了内边距和阴影效果，使页面更具吸引力。
按钮样式:
- 按钮具有内边距、背景色和悬停效果，提高了可用性。
表格样式:
- 表格有清晰的边框、内边距，并且行在悬停时有背景色变化效果，提升了用户体验。
链接样式:
- 链接样式与整体主题一致，并在悬停时显示下划线。

JavaScript 功能

JavaScript 代码处理表格的动态功能：

// 获取添加按钮元素
let add = document.getElementById("bn_add");// 点击添加按钮时触发的事件处理函数
add.onclick = function () {// 获取输入字段的值let id_text = document.getElementById("id").value;let name_text = document.getElementById("name").value;let sex_text = document.getElementById("sex").value;// 获取表格元素let table = document.getElementsByTagName("table")[0];// 插入新行let newRow = table.insertRow();newRow.innerHTML ="<td><input type='checkbox' name='user'></td>" +"<td>" + id_text + "</td>" +"<td>" + name_text + "</td>" +"<td>" + sex_text + "</td>" +"<td><a href='javascript:void(0);' οnclick='delTr(this);'>删除</a></td>";// 添加鼠标悬停效果newRow.onmouseover = function () {doOver(newRow);};newRow.onmouseout = function () {doOut(newRow);};
}// 主选择框的点击事件处理函数
document.getElementById("doChoose").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = this.checked; // 根据主选择框的状态设置复选框的状态}
};// 删除指定行的函数
function delTr(obj) {let table = obj.parentNode.parentNode.parentNode; // 获取表格let tr = obj.parentNode.parentNode; // 获取当前行table.removeChild(tr); // 删除当前行
}// 全选操作
document.getElementById("chooseAll").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = true; // 全部勾选}
}// 全不选操作
document.getElementById("chooseNull").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = false; // 全部取消勾选}
}// 反选操作
document.getElementById("chooseFan").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = !userArray[index].checked; // 反转每个复选框的状态}
}// 删除选中行操作
document.getElementById("deleteTable").onclick = function () {let userArray = document.getElementsByName("user");for (let index = userArray.length - 1; index >= 0; index--) {if (userArray[index].checked) {delTr(userArray[index]); // 删除选中的行}}
}// 行悬停效果函数
function doOver(row) {row.style.backgroundColor = "pink"; // 悬停时背景色变为粉色
}// 行悬停离开效果函数
function doOut(row) {row.style.backgroundColor = "white"; // 离开时背景色恢复为白色
}

JavaScript 功能说明

添加行:

add.onclick 处理输入字段的值，并在表格中添加新行，同时设置了悬停效果。

在插入行时使用let newRow = table.insertRow();可以有效的插入表格，使得表格为一体
或者使用childNode等属性插入
直接table.innerHTML += 表格代码不会将其拼接为一个整体表格。调整了使用 innerHTML 方法添加新行的方式，确保将新行正确插入表格中，而不是简单地将其附加到表格的 innerHTML。

全选/全不选操作:
- doChoose 处理全选和全不选操作，根据主选择框的状态更新复选框。
删除操作:
- delTr 函数通过获取父元素删除特定行。

批量操作按钮:

chooseAll、chooseNull 和 chooseFan 分别实现全选、全不选和反选复选框。

//批量删除
document.getElementById("deleteTable").onclick = function () {let userArray = document.getElementsByName("user");for (let index = userArray.length - 1; index >= 0; index--) {if (userArray[index].checked) {delTr(userArray[index]); // 删除选中的行}}
}
如果我们正序删除时，userArray.length会不断变化这样会使我们每次只能删除一般，这时我们可以采取倒序删除的方法，原理如下：倒着删除不会出现上述错误的原因是，当你从后往前删除时，每次删除一行后，不会影响到尚未遍历到的元素索引。具体来说：当你正向删除时，如果删除的是索引较小的元素，后面的元素会向前移动一个位置，导致索引发生变化，从而跳过某些元素。
倒着删除时，每次删除操作都影响已经遍历过的元素，不会影响到尚未遍历到的元素的索引，因此不会跳过任何元素。
让我们详细看一下这两种删除方式的工作原理。正向删除
假设你有一个数组 userArray，其长度为 5，其中元素分别为 A, B, C, D, E，并且你需要删除 B 和 D。初始状态：[A, B, C, D, E]
第一次删除 B 后：[A, C, D, E]
C 和 D 分别移动到原来 B 和 C 的位置。
第二次遍历到原来的索引 3 位置：E，跳过了 D。
倒着删除
初始状态：[A, B, C, D, E]
第一次删除 D 后：[A, B, C, E]
E 移动到原来 D 的位置。
第二次删除 B 后：[A, C, E]
此时，C 和 E 的位置没有影响。
从后往前删除时，每次删除操作都不会影响到未遍历到的元素的索引，因此不会出现跳过的问题。

行悬停效果:
- doOver 和 doOut 函数在行悬停时更改背景颜色，提高用户体验。

完整源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态表格</title><style>body {font-family: Arial, sans-serif;background-color: #f2f2f2;color: #333;margin: 0;padding: 20px;}.container {width: 80%;margin: auto;background: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.div_1 {text-align: center;margin-bottom: 20px;}.div_1 input[type="text"] {padding: 10px;margin-right: 10px;border: 1px solid #ccc;border-radius: 5px;}.div_1 input[type="button"] {padding: 10px 20px;background-color: #007BFF;color: white;border: none;border-radius: 5px;cursor: pointer;}.div_1 input[type="button"]:hover {background-color: #0056b3;}table {width: 100%;border-collapse: collapse;margin-bottom: 20px;}table,td,th {border: 1px solid #ddd;}th,td {padding: 12px;text-align: center;}th {background-color: #007BFF;color: white;}caption {font-size: 1.5em;margin: 10px;color: #007BFF;}.div_3 {text-align: center;font-family: Arial, sans-serif;color: #333;}.div_3 input[type="button"] {padding: 10px 20px;margin: 5px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;}.div_3 input[type="button"]:hover {background-color: #218838;}tr:hover {background-color: #f1f1f1;}a {color: #007BFF;text-decoration: none;}a:hover {text-decoration: underline;}</style>
</head><body><div class="container"><div class="div_1"><input type="text" name="id" id="id" placeholder="请输入编号"><input type="text" name="name" id="name" placeholder="请输入用户名"><input type="text" name="sex" id="sex" placeholder="请输入性别"><input type="button" value="添加" id="bn_add"></div><div class="div_2"><table><caption>学生信息表</caption><tr onmouseover="doOver(this);" onmouseout="doOut(this);"><th><input type="checkbox" id="doChoose"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr onmouseover="doOver(this);" onmouseout="doOut(this);"><td><input type="checkbox" name="user"></td><td>1</td><td>张三</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr></table></div><div class="div_3"><input type="button" value="全选" id="chooseAll"><input type="button" value="全不选" id="chooseNull"><input type="button" value="反选" id="chooseFan"><input type="button" value="删除" id="deleteTable"></div></div><script>let add = document.getElementById("bn_add");add.onclick = function () {let id_text = document.getElementById("id").value;let name_text = document.getElementById("name").value;let sex_text = document.getElementById("sex").value;let table = document.getElementsByTagName("table")[0];let newRow = table.insertRow();newRow.innerHTML ="<td><input type='checkbox' name='user'></td>" +"<td>" + id_text + "</td>" +"<td>" + name_text + "</td>" +"<td>" + sex_text + "</td>" +"<td><a href='javascript:void(0);' οnclick='delTr(this);'>删除</a></td>";newRow.onmouseover = function () {doOver(newRow);};newRow.onmouseout = function () {doOut(newRow);};}document.getElementById("doChoose").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = this.checked;}};function delTr(obj) {let table = obj.parentNode.parentNode.parentNode;let tr = obj.parentNode.parentNode;table.removeChild(tr);}document.getElementById("chooseAll").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = true;}}document.getElementById("chooseNull").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = false;}}document.getElementById("chooseFan").onclick = function () {let userArray = document.getElementsByName("user");for (let index = 0; index < userArray.length; index++) {userArray[index].checked = !userArray[index].checked;}}document.getElementById("deleteTable").onclick = function () {let userArray = document.getElementsByName("user");for (let index = userArray.length - 1; index >= 0; index--) {if (userArray[index].checked) {delTr(userArray[index]);}}}//悬停在每一行上面变化颜色function doOver(row) {row.style.backgroundColor = "pink";}function doOut(row) {row.style.backgroundColor = "white";}</script>
</body></html>

WEB前端08-综合案例(动态表格)

使用 HTML、CSS 和 JavaScript 创建动态表格在本教程中，我们将创建一个动态表格，允许用户添加行、选择项目，并执行批量操作，如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分…...

编程日记 2024/7/21 7:51:09

【面试题】Redo log和Undo log

Redo log 介绍Redo log之前我们需要了解一下，mysql数据操作的流程： 上述就是数据操作的流程图，可以发现sql语句并不是直接操作的磁盘而是通过操作内存，然后进行内存到磁盘的一个同步。这里我们必须要了解一些区域： 缓…...

编程日记 2024/7/21 7:50:08

开发实战经验分享：互联网医院系统源码与在线问诊APP搭建

作为一名软件开发者，笔者有幸参与了多个互联网医院系统的开发项目，并在此过程中积累了丰富的实战经验。本文将结合我的开发经验，分享互联网医院系统源码的设计与在线问诊APP的搭建过程。一、需求分析在开发任何系统之前，首先要…...

编程日记 2024/7/21 7:49:06

springboot系列教程（十六）：配置Actuator组件,实现系统监控

一、Actuator简介 1、监控组件作用在生产环境中，需要实时或定期监控服务的可用性。Spring Boot的actuator（健康监控）功能提供了很多监控所需的接口，可以对应用系统进行配置查看、相关功能统计等。 2、监控分类 Actuator 提供…...

编程日记 2024/7/21 7:46:04

单臂路由组网实验，单臂路由的定义、适用情况、作用

一、定义单臂路由是指通过在路由器的一个接口上配置许多子接口，从而实现原来相互隔离的不同VLAN之间的互通。子接口：把路由器上的实际的物理接口划分为多个逻辑上的接口，这些被划分的逻辑接口就是子接口。二、适用情况用在没有三层交换机，却要实现不同VLAN之间的互…...

编程日记 2024/7/21 7:45:03

【数据结构初阶】顺序表三道经典算法题（详解+图例）

Hello！很高兴又见到你了~~~ 看看今天要学点什么来充实大脑吧—— 目录 1、移除元素【思路图解】【总结】 2、删除有序数组中的重复项【思路图解】【总结】 3、合并两个有序数组【思路图解】【总结】至此结束，Show Time！ 1、…...

编程日记 2024/7/21 7:44:00

SpringBoot接入JPA连接数据库H2或MySQL例子

一，JPA相关的常用注解和对象 Entity，用于实体类声明语句之前，‌指出该Java类为实体类，‌将映射到指定的数据库表；Table，当实体类与其映射的数据库表名不同名时需要使用。‌该标注与Entity标注并列使用&…...

编程日记 2024/7/21 7:38:53

持续集成05--Gogs的安装与使用

前言在持续集成/持续部署（CI/CD）的旅程中，版本控制系统是不可或缺的一环。当我们在使用jenkins，想要达到测试脚本有更新，就让项目自动去进行构建，或者当开发脚本有更新，也可以自动去构建的效果…...

编程日记 2024/7/21 7:34:50

把[first,last)之间的元素填充为val。 template<class ForwardIterator, class Type> void fill( ForwardIterator first, //起始迭代器 ForwardIterator last, //结束迭代器 const Type& val //设置的值 );源码剖析 template<class ForwardIterator, c…...

编程日记 2024/7/21 7:33:49

Java：对比一个对象更新前后具体被修改了哪些值

Java：对比一个对象更新前后具体被修改了哪些值 Zyyyyu 的个人博客遇到一个需求就是要记录每行数据被修改更新后，要记录下当前值和修改前的值那有人就会说写个if去判断值是否被修改了，然后记录下来不就行了，这是一个思路&#x…...

编程日记 2024/7/21 7:30:47

GO——GMP 好文整理

GMP相关好文推荐： Golang 调度器设计思想、GMP 协程调度模型详解 Golang的协程调度器原理及GMP设计思想 Golang调度器GMP原理与调度全分析...

编程日记 2024/7/21 7:29:46

园区AR导航系统构建详解：从三维地图构建到AR融合导航的实现

随着现代园区规模的不断扩大与功能的日益复杂，传统的二维地图导航已难以满足访客高效、精准定位的需求。园区内部错综复杂的布局、频繁变更的商户位置常常让访客感到迷茫，造成寻路上的时间浪费。园区AR导航系统以创新的技术手段，破解了私域地…...

编程日记 2024/7/21 7:21:37

接口测试总结（非标准）

为什么要做接口测试？ 答：接口测试是为了检测系统组件间接口的正确性和稳定性，以及检查数据的交换、传递和控制管理过程，以及系统间的相互逻辑依赖关系等。接口测试可以帮助我们发现系统中的潜在问题，确保系统的稳定性…...

编程日记 2024/7/21 7:20:37

在Ubuntu 18.04上安装和使用Composer的方法

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。介绍 Composer 是一个流行的 PHP 依赖管理工具，主要用于简化项目依赖项的安装和更新。它会检查特定项目依赖的其他软件包&a…...

编程日记 2024/7/21 7:17:34

ssm 学习 ---（spring）

一、spring框架 1、基本框架 2、Beanfactory快速入门配置清单：xml文件 (1) 导入jar包或者maven坐标 (2) 定义UserService接口以及UserService实现类 (3) 创建bean.xml配置文件，将UserService信息配置到该xml文件中; (4)编写测试代码，创…...

编程日记 2024/7/21 7:15:32

Jupyter Notebook安装及基本使用

Jupyter Notebook安装及基本使用目录 Jupyter Notebook安装及基本使用方式一：Anaconda直接安装方式二：pip命令安装Jupyter使用虚拟环境方式一：Anaconda直接安装安装Anaconda 下载地址，输入邮箱，Windows下载开始安…...

编程日记 2024/7/21 7:10:27

Jenkins+Maven+Gitlab+Tomcat自动化构建打包+部署

目录环境准备导入项目包配置jenkins 构建项目配置项目上线修改项目代码测试环境准备本实操项目环境基于https://blog.csdn.net/Lzcsfg/article/details/140359830 首先在node01主机中操作，本次操作需要java8的版本，将之前安装的java17卸…...

编程日记 2024/7/21 7:09:26

Synchronized升级到重量级锁会发生什么？

我们从网上看到很多，升级到重量锁的时候不会降级，再来线程都是重量级锁今天我们来实验一把真的是这样的吗 1.首选导入Java对象内存布局的工具库： <dependency><groupId>org.openjdk.jol</groupId><artifactId>jol-…...

编程日记 2024/7/21 7:08:24

【Webpack】HMR 热更新

HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个…...

编程日记 2024/7/21 7:07:24

【计算机视觉】siamfc论文复现

什么是目标跟踪使用视频序列第一帧的图像(包括bounding box的位置)，来找出目标出现在后序帧位置的一种方法。什么是孪生网络结构孪生网络结构其思想是将一个训练样本(已知类别)和一个测试样本(未知类别)输入到两个CNN(这两个CNN往往是权值共享的)中&#xff0…...

编程日记 2024/7/21 7:06:23

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/12/1 3:59:38

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...

编程新知 2025/11/25 3:02:10

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2025/11/9 11:32:13

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...

编程新知 2025/12/3 2:11:27

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构定向转发机制

目录节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...

编程新知 2025/12/1 14:50:00

在 Spring Boot 中使用 JSP

jsp？ 好多年没用了。重新整一下还费了点时间，记录一下。项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/12/1 1:49:53

【Elasticsearch】Elasticsearch 在大数据生态圈的地位实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...

编程新知 2025/12/2 14:15:44

WEB前端08-综合案例(动态表格)

使用 HTML、CSS 和 JavaScript 创建动态表格

HTML 结构

HTML 元素说明

CSS 样式

关键 CSS 特性

JavaScript 功能

JavaScript 功能说明

相关文章：

WEB前端08-综合案例(动态表格)

【面试题】Redo log和Undo log

开发实战经验分享：互联网医院系统源码与在线问诊APP搭建

springboot系列教程（十六）：配置Actuator组件,实现系统监控

单臂路由组网实验，单臂路由的定义、适用情况、作用

【数据结构初阶】顺序表三道经典算法题（详解+图例）

SpringBoot接入JPA连接数据库H2或MySQL例子

持续集成05--Gogs的安装与使用

C++--fill

Java：对比一个对象更新前后具体被修改了哪些值

GO——GMP 好文整理

园区AR导航系统构建详解：从三维地图构建到AR融合导航的实现

接口测试总结（非标准）

在Ubuntu 18.04上安装和使用Composer的方法

ssm 学习 ---（spring）

Jupyter Notebook安装及基本使用

Jenkins+Maven+Gitlab+Tomcat自动化构建打包+部署

Synchronized升级到重量级锁会发生什么？

【Webpack】HMR 热更新

【计算机视觉】siamfc论文复现

挑战杯推荐项目

测试微信模版消息推送

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

ffmpeg（四）：滤镜命令

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构定向转发机制

在 Spring Boot 中使用 JSP

【Elasticsearch】Elasticsearch 在大数据生态圈的地位实践经验

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态