注：当前代码使用jquery-3.6.1.js版本官网下载地址：jQuery

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图书管理系统</title><script src="../图书管理系统4.0/jquery-3.6.1.js"></script><script>$(function () {//添加$("#Add").click(function () {//声明并获取var Id = $("#Id").val();var Name = $("#Name").val();var Price = $("#Price").val();//声明并新建一行trvar $tr = $("<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Price + "</td><td>" +'<input type="button" value="删除" onclick="Del(this)">' +'<input type="button" value="编辑" onclick="Edit(this)">'+ "</td></tr>")//判断填入的数值不能为空，为空则提示不能为空if (Id == "" || Name == "" || Price == "") {alert("添加的数值不能为空");} else {$("#table").append($tr);}//点击添加后清空文本框$("#Id").val("");$("#Name").val("");$("#Price").val("");})//保存$("#Save").click(function () {//声明并获取var Id = $("#Id").val();var Name = $("#Name").val();var Price = $("#Price").val();//声明并新建一行trvar $tr = $("<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Price + "</td><td>" +'<input type="button" value="删除" onclick="Del(this)">' +'<input type="button" value="编辑" onclick="Edit(this)">'+ "</td></tr>")//在编辑的行，将获取到的新数值替换（repalcewith()）旧数值$(Edit_tr).replaceWith($tr);//点击编辑后，隐藏添加，显示保存$("#Add").show();$("#Save").hide();//点击添加后清空文本框$("#Id").val("");$("#Name").val("");$("#Price").val("");})})//删除function Del(obj) {//  声明并通过obj找到删除按钮所在的tdvar td = $(obj).parent();//声明并通过td找到删除按钮所在的trvar tr = td.parent();//声明并提示带有确定、取消的提示款var flag = confirm("是否删除？")//判断用户点击了确认还是取消，后进行删除if (flag) {tr.remove();alert("删除成功");} else {alert("取消删除");}}//编辑var Edit_tr = "";function Edit(obj) {//  声明并通过obj找到编辑按钮所在的tdvar td = $(obj).parent();// 声明并通过td找到编辑按钮所在的trEdit_tr = td.parent();//声明并通过td找到td的兄弟姐妹元素var tds = td.siblings();//声明并获取到兄弟姐妹元素var Id = tds.eq(0).text();var Name = tds.eq(1).text();var Price = tds.eq(2).text();//设置所有匹配元素的value属性值$("#Id").val(Id);$("#Name").val(Name);$("#Price").val(Price);//点击编辑后，隐藏添加，显示保存$("#Add").hide();$("#Save").show();}</script>
</head><body><h1 style="text-align: center;">图书管理系统</h1><div style="margin: auto;width: 810px;"><table border="1" width="800px" id="table"><tr><th>编号</th><th>书名</th><th>价格</th><th>操作</th></tr><tr><td>1</td><td>《东八区的先生们》</td><td>88.8</td><td><input type="button" value="删除" onclick="Del(this)"><input type="button" value="编辑" onclick="Edit(this)"></td></tr><tr><td>2</td><td>《霸道总裁爱上我》</td><td>66.6</td><td><input type="button" value="删除" onclick="Del(this)"><input type="button" value="编辑" onclick="Edit(this)"></td></tr></table></div><div style="margin: auto;width: 750px;margin-top: 100px;">编号：<input type="text" id="Id">书名：<input type="text" id="Name">价格：<input type="text" id="Price"><button id="Add">添加</button><button id="Save" style="display: none;">保存</button></div>
</body></html>

使用JavaScript和jQuery实现表格增删改(图书管理系统)相关推荐

增删改查 HTML表格页面,表格增删改查.html
表格增删改查 body{ background:#dddddd; text-align:center; } .list { display: inline-block; margin-top: 20p ...
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理效果页面增删改翻页页面显示条数查找跳页代码结语效果话不多说,直接看效果,本次代码较为复杂,希望大家可以耐心阅读,不 ...
如何在30分钟完成表格增删改查的前后端框架搭建
30分钟,你可以做什么? 可以风卷残云的饱餐一顿:可以简单地打扫一下房间:或者可以跳10十遍刘畊宏<本草纲目>毽子操. 而今天,本葡萄要带你在30分钟内完成一套拥有增删改查表格系统的前后端 ...
html增删改后让table自动刷新,vue如何实现表格增删改查效果
vue如何实现表格增删改查效果发布时间:2021-04-23 14:34:54 来源:亿速云阅读:90 作者:小新小编给大家分享一下vue如何实现表格增删改查效果,相信大部分人都还不怎么了解,因 ...
MySQL数据库基础表格——增删改查（下）
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️树高千尺,落叶归根人生不易,人间真情目录 MyS ...
jQuery表格增删改查
最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode. 1.首先我自己写了一个简单的div布局. 2.实现 ...
layui+SpringBoot实现表格增删改查
前言本文将演示如何使用Springboot(后端框架)和layui(前端框架)将数据库中的数据渲染到前端页面,以及对前端页面的数据实现增删改. 效果图如下: 完整项目已上传至GitHub,项目地址: ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
纯JS+HTML简单表格增删改查
前言欢迎大家来到我的博客,请各位看客们点赞.收藏.关注三连! 欢迎大家关注我的知识库,Java之从零开始 · 语雀你的关注就是我前进的动力! CSDN专注于问题解决的博客记录,语雀专注于知识的收集 ...

使用JavaScript和jQuery实现表格增删改(图书管理系统)

注：当前代码使用jquery-3.6.1.js版本官网下载地址：jQuery

使用JavaScript和jQuery实现表格增删改(图书管理系统)相关推荐

最新文章

热门文章

使用JavaScript和jQuery实现表格增删改(图书管理系统)

注：当前代码使用jquery-3.6.1.js版本 官网下载地址：jQuery

使用JavaScript和jQuery实现表格增删改(图书管理系统)相关推荐

最新文章

热门文章

注：当前代码使用jquery-3.6.1.js版本官网下载地址：jQuery