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

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

news 2025/7/4 23:21:57

一、添加

要求：

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

实现：

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。特征提取与优化从复杂的光学数据中自…...

编程新知 2025/7/3 13:24:14

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/7/4 10:56:02

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

linux 下常用变更-8

1、删除普通用户查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...

编程新知 2025/6/15 9:39:08

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/6/21 17:17:46

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建前言如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...

编程新知 2025/7/4 10:53:05

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/6/26 4:10:00

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/7/4 1:28:58

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/7/2 15:22:03

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/6/20 11:18:11

一、添加

要求：

实现：

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

2.从数据库里调数据

3.添加

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

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

$3. 输入框添加

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

4.效果

二、删除

2.删除

1.在tbody里找到删除按钮

2.得到Index属性值

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

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

3.效果

三、修改

要求：

实现：

2. 修改

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

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

3.效果

相关文章：