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

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

news 2026/1/3 3:54:13

一、添加

要求：

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

实现：

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/1/2 4:32:23

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...

编程新知 2026/1/1 23:11:45

《Docker》架构

文章目录架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器，docker，镜像，k8s 架构模式单机架构单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2026/1/2 8:03:41

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据！该数据集源自2025年4月发表于《地理学报》的论文成果…...

编程新知 2026/1/1 18:28:17

Linux入门(十五)安装java安装tomcat安装dotnet安装mysql

安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了，系统很多命…...

编程新知 2026/1/1 22:45:37