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

后端-对表格数据进行添加、删除和修改

news 2026/5/17 0:21:39

一、添加

要求：

按下添加按钮出现一个板块输入添加的数据信息，点击板块的添加按钮，添加；点击取消，板块消失。

实现：

1.首先，设计页面输入框格式，表格首行

2.从数据库里调数据

3.添加

1.首先，设计页面输入框格式，表格首行

<body>商品名称：<input type="text" class="text"><input type="button" value="查找" class="searchbtn" ><input type="button" value="添加" class="addbtn" >
<table border="1"><thead><tr><th>商品名称</th><th>数量</th><th>价格</th><th>操作</th></tr></thead><tbody><!-- <tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td><td>班级</td><th><input type="button" value="修改"><input type="button" value="删除"></th></tr>

2.从数据库里调数据

请求路径；

请求方式；

参数域；

请求成功；

请求失败；

这里调数据不需要传参数，把数据库返回的信息在表格后插入。

$(function(){//发起请求$.ajax({url:"SearchProduct",//请求路径type:"get",//请求方式success:function(value){//请求成功$("tbody").empty()var arr=value.datafor(var i=0;i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].num+"</td>"+"<td>"+arr[i].price+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].name+"'><input type='button' value='删除' class='delete' index='"+arr[i].name+"'></td>"+"</tr>") }},error:function(){//请求失败alert("出错啦")},})

服务生接收请求，执行逻辑，返回信息。（查找数据，后端返回数据）

@WebServlet("/SearchProduct")
public class SearchProduct extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SearchProduct() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");
//		设置后端给前端返回的数据为json格式response.setContentType("text/json;charset=utf-8");
//		设置成这样，必须有一个json格式//		接收参数
//		查找String sql="select * from 商品表";String[] colums= {"name","num","price"};String res=MysqlUtil.getJsonBySql(sql, colums);System.out.println(res);
//		后端给前端返回数据response.getWriter().write(res);

后端数据如图：

3.添加

$1.设计添加的版块样式（刚开始隐藏，只有点击“添加”按钮后显现）

<div class='add_model'>
添加
<br><br>
名称：<input type='text' class='name'><br>
数量：<input type='text' class='num'><br>
价格：<input type='text' class='price'><br>
<input type="button" value="添加" class="add" >	<input type="button" value="取消" class="cancel" >
</div>

.add_model{width:240px;heigth:150px;border:4px solid blue;margin-top:20px;padding:15px;display:none;}

$2. 点击“添加”按钮后

//显示添加模块$(".addbtn").on("click",function(){$(".add_model").css("display","block")})

$3. 输入框添加

#1. val() 获取输入框的值

#2. 前端获取的值传到后端（请求路径；请求方式；参数域；请求成功；请求失败）

//添加$(".addbtn").on("click",function(){//获取输入框里的值var name=$(".name").val()var num=$(".num").val()var price=$(".price").val()console.log(name)console.log(num)console.log(price)$.ajax({url:"AddServlet",//请求路径type:"post",//请求方式data:{name,num,price},//参数域success:function(value){//请求成功console.log(value)//页面刷新location.reload()},error:function(){//请求失败alert("出错啦")},})})

#3.后端接收参数，并返回信息

//		解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//接收参数String name=request.getParameter("name");String num=request.getParameter("num");String price=request.getParameter("price");System.out.println(name);System.out.println(num);System.out.println(price);//添加String sql="insert into 商品表(name,num,price) values(\""+name+"\","+num+","+price+")";int n = MysqlUtil.add(sql);//返回信息String res="添加失败";if(n>0) {res="添加成功";}response.getWriter().write(res);}

#4.请求成功，页面刷新

location.reload()

$4.点击“取消”按钮板块消失

//隐藏添加模块$(".cancel").on("click",function(){$(".add_model").css("display","none")})

4.效果

二、删除

1.同以上“添加”部分相同，假设现在已经从数据库调出数据（不再赘述，同步骤一、添加 1.2.）

2.删除

因“删除”键是从数据库调数据时后加的，在表格的tbody里，故需要在tbody里找“删除”按钮。在“添加”板块已经对“删除”按钮加class属性。

for(var i=0;i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].num+"</td>"+"<td>"+arr[i].price+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].name+"'><input type='button' value='删除' class='delete' index='"+arr[i].name+"'></td>"+"</tr>") }

tips:

我这里的index属性值设的是name，如果有id可以设成id

1.在tbody里找到删除按钮

2.得到Index属性值

3.前端传入后端（请求路径；请求方式；参数域；请求成功；请求失败）

把得到的Index属性值传入后端

//删除$("tbody").on("click",".delete",function(){var id= $(this).attr("index")$.ajax({url:"DeleteServlet",//请求路径type:"post",//请求方式data:{id},//参数域success:function(value){//请求成功alert(value)//页面刷新location.reload()},error:function(){//请求失败alert("出错啦")},})})

4.后端接收参数，执行逻辑，返回信息

//		解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//		接收参数String id=request.getParameter("id");
//		删除String sql="delete from 商品表  where name = '"+id+"'";int num=MysqlUtil.del(sql);
//		返回信息String res="删除失败";if(num>0) {res="删除成功";}response.getWriter().write(res);}

3.效果

数据库数据如图：

三、修改

要求：

点击tbody中的修改按钮，出现修改的板块，

板块中要回显信息，在原有的基础上修改信息。

点击“取消”按钮板块消失

实现：

1. 前两个步骤还是同“添加”1.2.

2. 修改

$1. 设计修改的版块样式（刚开始隐藏，只有点击“添加”按钮后显现）

<div class='update_model'>
修改
<br><br>
名称：<input type='text' class='u_name'><br>
数量：<input type='text' class='u_num'><br>
价格：<input type='text' class='u_price'><br>
<input type="button" value="修改" class="updatebtn" >	<input type="button" value="取消" class="u_cancel" >
</div>

.update_model{width:240px;heigth:150px;border:4px solid gold;margin-top:20px;padding:15px;display:none;}

隐藏模块

两个模块不冲突（不同时显示）

//显示添加模块$(".addbtn").on("click",function(){$(".add_model").css("display","block")$(".update_model").css("display","none")})

//隐藏修改模块$(".u_cancel").on("click",function(){$(".update_model").css("display","none")})

$2. 点击“修改”按钮后

#1.信息回显

用val()获取值

//修改弹框展示回显$("tbody").on("click",".update",function(){$(".add_model").css("display","none")$(".update_model").css("display","block")var id=($(this).attr("index"))$.ajax({url:"SearchByName",//请求路径type:"get",//请求方式data:{id},//参数域success:function(value){//请求成功console.log(value)var obj=value.data[0]$(".u_name").val(obj.name)$(".u_num").val(obj.num)$(".u_price").val(obj.price)$(".updatebtn").attr("index",obj.name)},error:function(){//请求失败alert("出错啦")},})})

//		解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");
//		设置后端给前端返回的数据为json格式response.setContentType("text/json;charset=utf-8");String id=request.getParameter("id");
//		查找String sql="select * from 商品表  where name = '"+id+"'";String[] colums= {"name","num","price"};String res=MysqlUtil.getJsonBySql(sql, colums);System.out.println(res);
//		后端给前端返回数据response.getWriter().write(res);}

#2.修改

传入参数（name,num,price,id）（请求路径；请求方式；参数域；请求成功；请求失败）

//修改$(".updatebtn").on("click",function(){//获取输入框里的值var name=$(".u_name").val()var num=$(".u_num").val()var price=$(".u_price").val()var id=$(this).attr("index")console.log(id)$.ajax({url:"UpdateServlet",//请求路径type:"post",//请求方式data:{name,num,price,id},//参数域success:function(value){//请求成功console.log(value)//页面刷新location.reload()},error:function(){//请求失败alert("修改出错啦")},})})

后端接收参数，并返回信息

//		解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//接收参数String name=request.getParameter("name");String num=request.getParameter("num");String price=request.getParameter("price");String id=request.getParameter("id");System.out.println(name);System.out.println(num);System.out.println(price);//修改String sql="update 商品表 set name=\""+name+"\",num="+num+",price="+price+" where name=\""+id+"\"";int n = MysqlUtil.add(sql);//返回信息String res="修改失败";if(n>0) {res="修改成功";}response.getWriter().write(res);}

#3.请求成功，页面刷新

location.reload()

3.效果

后端-对表格数据进行添加、删除和修改

一、添加要求： 按下添加按钮出现一个板块输入添加的数据信息，点击板块的添加按钮，添加；点击取消，板块消失。实现： 1.首先，设计页面输入框格式，表格首行 2.从数据库里调数据 3.添加…...

编程日记 2024/9/27 5:33:24

【学习笔记】手写 Tomcat 七

目录一、优化 Dao 1. 设置 UserDaoImpl 为单例模式 2. 创建 Dao 工厂 3. 在 Service 层获取 UserDao 的实例二、优化 Service 1. 设置 UserServiceImpl 为单例模式 2. 创建 Service 工厂 3. 在 Servlet 层获取 Service 实现类的对象三、优化 Servlet 1. 使用配置…...

编程日记 2024/9/27 5:32:23

QT开发：详解 Qt 多线程编程核心类 QThread：基本概念与使用方法

1. 引言在现代应用程序开发中，多线程编程是一个关键技术，能够显著提高程序的效率和响应速度。Qt 是一个跨平台的 C 框架，其中 QThread 类是实现多线程编程的核心类。本文将深入详解 QThread 的基本概念、使用方法及其在实际应用中的重要性。…...

编程日记 2024/9/27 5:31:22

【芋道源码】gitee很火的开源项目pig——后台管理快速开发框架使用笔记（微服务版之本地开发环境篇）

后台管理快速开发框架使用笔记（微服务版之本地开发环境篇） 后台管理快速开发框架使用笔记（微服务版之本地开发环境篇） 后台管理快速开发框架使用笔记（微服务版之本地开发环境篇）前言一、如何获取项目&#…...

编程日记 2024/9/27 5:30:20

设计模式、系统设计 record part01

技术路线： 工程师》设计师》分析师》架构师管理路线： 项目经理》技术经理工程师： 编程技术、测试技术设计师： 工程师设计技术分析师： 设计师分析技术架构师： 分析师架构技术项目经理： 时间…...

编程日记 2024/9/27 5:29:19

服务器与普通电脑的区别是什么？

服务器作为企业进行线上业务所使用的网络设备，大多数的用户对于服务器都有一定的了解，而普通的电脑则是人们在进行日常娱乐活动中经常会用到的设备，本文就来探讨一下服务器与普通电脑之间的区别是什么吧！ 普通的电脑就是我们通常所…...

编程日记 2024/9/27 5:28:15

Vue3学习（六）Vue3 + ts几种写法

前言官网提到组合式api和选项式api 选项式api其实就是vue2的写法，组合式api是vue3的新写法（组合式api可以在script中使用setup（）也可以使用<script setup>，<script setup>是setup（&#xff…...

编程日记 2024/9/27 5:27:14

【前端】ES6：Proxy代理和Reflect对象

文章目录 1 Proxy代理1.1 get方法1.2 set方法1.3 has方法1.4 this问题 2 Reflect对象2.1 代替Object的某些方法2.2 修改某些Object方法返回结果2.3 命令式变为函数行为2.4 配合Proxy 1 Proxy代理 Proxy如其名，它的作用是在对象和和对象的属性值之间设置一个代理&am…...

编程日记 2024/9/27 5:26:13

基于微信开发助手企鹅音乐微信小程序的设计与实现（源码+文档+讲解）

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2024/9/27 5:24:11

学习Spring Boot，应该从哪里开始学起

文章目录前言1. Java基础2. Spring框架基础3. Spring Boot入门4. 搭建Spring Boot项目5. 编写RESTful API6. 数据库操作7. 安全性和测试8. 部署和运维9. 实践和项目总结前言学习Spring Boot，应该从哪里开始学起学习Spring Boot，你可以从以下几个步骤开始学起： 1. Java基…...

编程日记 2024/9/27 5:23:10

【JavaEE初阶】深入解析死锁的产生和避免以及内存不可见问题

前言： 🌈上期博客：【后端开发】JavaEE初阶—线程安全问题与加锁原理（超详解）-CSDN博客 🔥感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 ⭐️小编会在后端开发的学习中不断更新~~~ &#…...

编程日记 2024/9/27 5:21:08

企微群管理软件：构建高效社群运营的新引擎

在数字化营销日益盛行的今天，企业微信（简称“企微”）群作为企业与用户直接互动的重要平台，其管理与运营效率直接关系到企业的品牌形象、用户满意度及市场影响力。企微群管理软件，作为专为企微社群设计的高效管理工具&a…...

编程日记 2024/9/27 5:20:07

CORE 中间件、wwwroot

ASP.NET Core中间件组件是被组装到应用程序管道中以处理HTTP请求和响应的软件组件（从技术上来说，组件只是C＃类）。 ASP.NET Core应用程序中的每个中间件组件都执行以下任务。选择是否将 HTTP 请求传递给管道中的下一个组件。这可…...

编程日记 2024/9/27 5:19:06

SpringBoot 与 Maven 快速上手指南

SpringBoot 与 Maven 快速上手指南在Java开发领域，Spring Boot和Maven是两个极其重要的工具，它们极大地简化了企业级应用的开发和构建过程。Spring Boot通过自动配置和起步依赖等特性，让开发者能够快速搭建起一个Spring应用；而M…...

编程日记 2024/9/27 5:18:05

大觅网之自动化部署（Automated Deployment of Da Mi Network）

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。本人主要分享计算机核心技…...

编程日记 2024/9/27 5:17:04

【C++】入门基础知识-1

🍬个人主页：Yanni.— 🌈数据结构：Data Structure. 🎂C语言笔记：C Language Notes 🏀OJ题分享： Topic Sharing 目录前言： C关键字命名空间命名空间介…...

编程日记 2024/9/27 5:16:03

Redis一些简单通用命令认识常用数据类型和编码方式认识Redis单线程模型

通用命令 get() / set() 这是Redis中两个最为核心的命令。 set插入这里的key 和 value都是字符串，我们可以加双引号或者单引号，或者不加。 get查找如果查询的key值不存在，那么会返回一个 nil ，也就是代表空在Redis中命令…...

编程日记 2024/9/27 5:15:02

使用电子模拟器 Wokwi 运行 ESP32 示例（Arduino IDE、VSCode、ESP32C3）

文章目录 Wokwi 简介安装客户端（Mac/Linux）创建 Token Arduino IDEVSCode 配置安装 wokwi 插件打开编译后目录 ESP32C3 示例Arduino IDE创建模拟器运行模拟器 Wokwi 简介 Wokwi 是一款在线电子模拟器。您可以使用它来模拟 Arduino、ESP32、STM32 以及许…...

编程日记 2024/9/27 5:14:01

C嘎嘎入门篇：类和对象（1）

前言： 小编在之前讲述了C的部分入门基础，读者朋友一定要掌握好那些，因为C的学习和C有点不同，C的知识都是比较连贯的，所以我们学好了前面才可以学习后面的内容，本篇文章小编将会讲述C真正的入门篇&#xff1…...

编程日记 2024/9/27 5:13:00

tomcat服务搭建部署ujcms网站

tomcat服务搭建部署ujcms网站关闭selinux和防火墙 setenforce 0 && systemctl stop firewalld安装java环境 #卸载原有java8环境 yum remove java*#上传java软件包，并解压缩 tar -xf openjdk-11.0.1_linux-x64_bin.tar.gz && mv jdk-11.0.1 jdk11…...

编程日记 2024/9/27 5:08:56

避坑指南：HugeGraph-Server 0.12.0 用MySQL做后端存储，配置文件到底怎么改？（附完整流程）

HugeGraph-Server 0.12.0 MySQL后端配置深度解析与实战避坑指南当选择MySQL作为HugeGraph-Server的后端存储时，配置文件的细微差异往往成为项目落地的"拦路虎"。本文将深入剖析hugegraph.properties中MySQL相关配置的每一个关键参数，结合典型…...

编程新知 2026/5/16 23:41:07

电解电容核心参数解析：从ESR、纹波电流到选型实战

1. 项目概述：从“黑疙瘩”到电路心脏在电子工程师的物料盒里，电解电容绝对是个让人又爱又恨的家伙。它不像电阻那样温顺稳定，也不像芯片那样精密复杂，它就是个黑乎乎的圆柱体，或者扁平的方块，上面印着一些让…...

编程新知 2026/5/16 23:30:54

AI教材写作必备：低查重工具，助力高效生成专业教材！

选择 AI 教材编写工具的困境与解决方案在准备教材之前，选择合适的工具就像进入了一个“纠结的大迷宫”！使用办公软件确实方便，但功能往往太过基础，搭建框架和调整格式都得手动搞定；而如果选择专业的 AI 教材编写工具…...

编程新知 2026/5/16 23:03:34

Midjourney概念艺术风格≠调参！20年CG总监拆解：风格生成本质是跨模态语义压缩，3个关键损失函数阈值决定成败

更多请点击： https://intelliparadigm.com 第一章：Midjourney概念艺术风格≠调参！20年CG总监的范式颠覆风格不是参数堆砌，而是语义锚点重构传统AI绘画工作流常将“风格”等同于反复调整 --s、--style raw 或后缀词如 trending…...

编程新知 2026/5/16 22:55:31

终极M3U8视频下载神器：3步搞定加密流媒体！

终极M3U8视频下载神器：3步搞定加密流媒体！ 【免费下载链接】m3u8-downloader 一个M3U8 视频下载(M3U8 downloader)工具。跨平台: 提供windows、linux、mac三大平台可执行文件,方便直接使用。项目地址: https://gitcode.com/gh_mirrors/m3u8d/m3u8-do…...

编程新知 2026/5/16 21:53:32