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

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

news 2025/11/12 22:54:56

一、添加

要求：

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

实现：

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.效果

相关文章：

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

一、添加 要求&#xff1a; 按下添加按钮出现一个板块输入添加的数据信息&#xff0c;点击板块的添加按钮&#xff0c;添加&#xff1b;点击取消&#xff0c;板块消失。 实现&#xff1a; 1.首先&#xff0c;设计页面输入框格式&#xff0c;表格首行 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. 引言 在现代应用程序开发中&#xff0c;多线程编程是一个关键技术&#xff0c;能够显著提高程序的效率和响应速度。Qt 是一个跨平台的 C 框架&#xff0c;其中 QThread 类是实现多线程编程的核心类。本文将深入详解 QThread 的基本概念、使用方法及其在实际应用中的重要性。…...

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

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

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

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

设计模式、系统设计 record part01

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

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

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

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

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

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

前言 官网提到组合式api和选项式api 选项式api其实就是vue2的写法&#xff0c;组合式api是vue3的新写法&#xff08;组合式api可以在script中使用setup&#xff08;&#xff09;也可以使用<script setup>&#xff0c;<script setup>是setup&#xff08;&#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如其名&#xff0c;它的作用是在对象和和对象的属性值之间设置一个代理&am…...

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

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

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、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初阶】深入解析死锁的产生和避免以及内存不可见问题

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

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

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

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

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

CORE 中间件、wwwroot

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

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

SpringBoot 与 Maven 快速上手指南

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

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

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

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

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

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

&#x1f36c;个人主页&#xff1a;Yanni.— &#x1f308;数据结构&#xff1a;Data Structure.​​​​​​ &#x1f382;C语言笔记&#xff1a;C Language Notes &#x1f3c0;OJ题分享&#xff1a; Topic Sharing 目录 前言&#xff1a; C关键字 命名空间 命名空间介…...

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

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

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

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

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

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

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

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

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

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

tomcat服务搭建部署ujcms网站

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

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/11/12 5:39:19

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/11/9 9:09:52

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/11/12 20:40:52

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/9/18 15:40:29

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/11/8 10:14:31

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/11/12 18:51:28

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

编程新知 2025/11/10 18:22:07