Jquery实现增删改查
2024-06-16 02:54:25
使用的技术 jquery bootstrap
实现功能：实现对数据的添加，删除，修改，查找
原理：利用jquery对dom操作
<!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>Document</title><!-- 新 Bootstrap 核心 CSS 文件--><link rel="stylesheet"href="../../../插件/Bootstrap5/http_cdn.staticfile.org_twitter-bootstrap_4.4.1_css_bootstrap.css"><!-- // jQuery文件。务必在bootstrap.min.js 之前引入--><script src="../../../插件/Bootstrap5/http_cdn.staticfile.org_jquery_3.4.1_jquery.js"></script><!-- // bootstrap 的弹窗、提示、下拉菜单，需要 popper.min.js 才完美定位--><script src="../../../插件/Bootstrap5/http_cdn.staticfile.org_popper.js_1.16.0_umd_popper.js"></script><!-- // 最新的 Bootstrap 核心 JavaScript 文件--><script src="../../../插件/Bootstrap5/http_cdn.staticfile.org_twitter-bootstrap_4.4.1_js_bootstrap.js"></script><style>body {width: 100%;height: 100%;}.a {float: right;width: 1680px;height: 60px;background: url(2.PNG) no-repeat 0px 0px/100% 100%;}.b {float: left;width: 240px;height: 900px;background: url(1.PNG) no-repeat 0px 0px/100% 100%;}.Div {max-width: 1000px;max-height: 400px;overflow: scroll;position: absolute;left: 300px;top: 100px;}.Div1 {max-width: 100%;height: auto;margin: 20px 0px;display: inline-block;text-align: center;}.Div1 input {padding: 10px;border: 1px solid #999;outline-color: #66b1ff;border-radius: 3px;}.Div1 button {padding: 6px 16px;}.Div2 {border-image: linear-gradient(to right, #8f41e9, #578aef) 1;border-left: 1px solid #999;border-top: 1px solid #999;width: 954px;}.Div2 ul {margin: 0;}.Div2 ul li {border-bottom: 1px solid #999;border-right: 1px solid #999;padding: 10px;}.Div2 ul div {display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #999;border-right: 1px solid #999;}.button1 {border-radius: 3px;border: 1px solid #999;padding: 5px 10px;}.button2 {background-color: rgb(240, 112, 112);border-radius: 3px;border: 0px;padding: 6px 11px;}.Div2-1 {max-width: 100%;height: auto;text-align: center;}.Div2-2 {display: block;max-width: 100%;height: auto;}.Div ul {display: flex;padding: 0;}.Div ul input {margin: 0px 20px;}.Div li {width: 180px;list-style: none;text-align: center;}.Div3 {display: none;background: rgba(0, 0, 0, 0.5);position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.Div3-1 {width: 340px;height: 260px;background: white;position: absolute;left: 0;right: 0;top: 300px;margin: auto;}.Div3-1-1 {width: 300px;margin-left: 20px;margin-bottom: 20px;margin-top: 10px;display: flex;justify-content: space-between;}.Div3-1-1 span {font-size: 18px;}.Div3-1-1 .X {color: #999;cursor: pointer;}.Div3-1-1 .X:hover {color: #66b1ff;}.Div3-1-2 {padding: 0px 60px;display: flex;margin-bottom: 10px;}.Div3-1-2 span {font-size: 14px;color: #666;line-height: 39px;margin-right: 10px;}.Div3-1-2 input {width: 140px;padding: 5px;/*border: 1px solid red;*/border-image: linear-gradient(to right, #8f41e9, #578aef) 1;}.Div3-1-3 {padding: 0px 60px;display: flex;margin-bottom: 10px;}.Div3-1-3 span {font-size: 14px;color: #666;line-height: 39px;margin-right: 10px;}.Div3-1-3 input {width: 140px;padding: 5px;border-image: linear-gradient(to right, #8f41e9, #578aef) 1;}.Div3-1-4 {padding: 0px 60px;display: flex;margin-bottom: 10px;}.Div3-1-4 span {font-size: 14px;color: #666;line-height: 39px;margin-right: 10px;}.Div3-1-4 input {width: 140px;padding: 5px;margin-left: 5px;border-image: linear-gradient(to right, #8f41e9, #578aef) 1;}.Div3-1-5 {float: right;margin-right: 60px;margin-top: 10px;}.Div3-1-5 .D3-bt1 {padding: 6px 12px;border: 1px solid #999;border-radius: 3px;margin-right: 10px;cursor: pointer;}.Div3-1-5 .D3-bt2 {padding: 6px 12px;border: 1px solid #66b1ff;background-color: #66b1ff;border-radius: 3px;cursor: pointer;}/*设置透明背景图片*/body:before{background: url("img.png") no-repeat;background-size: cover;content: '';position: absolute;width: 1920px;height: 1080px;top: 0;left: 0;z-index: -1;filter: blur(3px);}::-webkit-scrollbar {/*隐藏滚轮*/display: none;}.Div li{font-size: large;color: #3ea2ee;}</style></head>
<body><div class="container mt-3" style="display: inline-block"><!-- <h2>闪烁的加载效果</h2>--><!-- <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>--><div class="spinner-grow text-muted"></div><div class="spinner-grow text-primary"></div><div class="spinner-grow text-success"></div><div class="spinner-grow text-info"></div><div class="spinner-grow text-warning"></div><div class="spinner-grow text-danger"></div><div class="spinner-grow text-secondary"></div><div class="spinner-grow text-dark"></div><div class="spinner-grow text-light"></div>
</div>
<div class="container mt-3" style="display: contents"><!-- <h2>闪烁的加载效果</h2>--><!-- <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>--><div class="spinner-grow text-muted"></div><div class="spinner-grow text-primary"></div><div class="spinner-grow text-success"></div><div class="spinner-grow text-info"></div><div class="spinner-grow text-warning"></div><div class="spinner-grow text-danger"></div><div class="spinner-grow text-secondary"></div><div class="spinner-grow text-dark"></div><div class="spinner-grow text-light"></div>
</div><div class="a"></div>
<div class="b"></div>
<div class="Div"><div class="Div1 form-floating container"><input type="text" id="gameName" class="form-control" placeholder="输入游戏名称"><label for="gameName"></label><input type="text" placeholder="输入游戏代码"><button class="D1-button1 btn-primary"><i></i><span >搜索</span></button><button class="D1-button2 btn-secondary"><i></i><span>添加</span></button></div><!-- 表格 --><div class="Div2 table table-hover"><div class="Div2-1"><ul><div><input type="checkbox"></div><li>游戏名称</li><li>游戏代码</li><li>修改时间</li><li>修改人</li><li>操作</li></ul></div><div class="Div2-2"><ul><div><input type="checkbox"></div><li>古墓丽影</li><li>2111</li><li>2018-05-15 09:59:25</li><li>劳拉</li><li><button class="button1 " type="button ">编辑</button><button class="button2" type="button">删除</button></li></ul><ul><div><input type="checkbox"></div><li>刺客信条</li><li>1352</li><li>2018-05-19 11:23:20</li><li>阿黛尔</li><li><button class="button1" type="button">编辑</button><button class="button2" type="button">删除</button></li></ul><ul><div><input type="checkbox"></div><li>彩虹6号</li><li>3242</li><li>2018-05-18 22:04:51</li><li>橘子</li><li><button class="button1" type="button">编辑</button><button class="button2" type="button">删除</button></li></ul><ul><div><input type="checkbox"></div><li>双人成行</li><li>1243</li><li>2018-05-15 16:32:58</li><li>忘了</li><li><button class="button1" type="button">编辑</button><button class="button2" type="button">删除</button></li></ul><!-- <ul>-->
<!-- <div>-->
<!-- <input type="checkbox">-->
<!-- </div>-->
<!-- <li>孤岛危机</li>-->
<!-- <li>2452</li>-->
<!-- <li>2018-05-16 14:45:07</li>-->
<!-- <li>只狼</li>-->
<!-- <li>-->
<!-- <button class="button1" class="button1" type="button">编辑</button>-->
<!-- <button class="button2" type="button">删除</button>-->
<!-- </li>-->
<!-- </ul>--></div></div>
</div><!-- 弹框 -->
<div class="Div3"><div class="Div3-1"><div class="Div3-1-1"><span>修改</span><span class="X">X</span></div><div class="Div3-1-2"><span>游戏名称</span><input type="text" placeholder="请输入游戏名称"></div><div class="Div3-1-3"><span>游戏代码</span><input type="text" placeholder="请输入游戏代码"></div><div class="Div3-1-4"><span>修 改 人</span><input type="text" placeholder="请输入修改人"></div><div class="Div3-1-5"><button class="D3-bt1" type="button">取消</button><button class="D3-bt2" type="button">保存</button></div></div>
</div>
<script>//调用全选方法chance()//全选方法function chance() {$(".Div2-1").find('input').eq(0).click(function () {if ($(this).prop('checked')) {$('input[type="checkbox"]').prop('checked', true)} else {$('input[type="checkbox"]').prop('checked', false)}})// 取消某一项的选择同时也取消全选按钮var D2 = $(".Div2-2").find('input');$(".Div2-2").find('input').click(function () {var flag = true;for (var i = 0; i < D2.length; i++) {if (!D2.eq(i).prop('checked')) {flag = false;}}if (flag) {$(".Div2-1").find('input').eq(0).prop('checked', true)} else {$(".Div2-1").find('input').eq(0).prop('checked', false)}})};// 点击删除按钮Delete()function Delete() {$(".Div2-2").find('.button2').click(function () {console.log($(".Div2-2").find(".button2"));console.log($(this));console.log(Ul2);$(this).parents("ul")[0].remove();// for(var i = 0; i < Ul2.length; i++){// if(Ul2[i] == $(this).parents("ul")[0]){// console.log(Ul2[i]);// console.log($(this.parents("ul")[0]))// splice(i,1)// }// }})};// 修改// 点击编辑按钮Fix()function Fix() {$(".Div2-2").find('.button1').click(function () {$(".Div3").css("display", "block");// 获取编辑修改时的部门名称值 腾讯 2111 徐宝宝var Company = $(this).parents('ul').find('li').eq(0).text();// 获取编辑修改时的部门代码值var Number = $(this).parents('ul').find('li').eq(1).text();// 获取编辑修改时的修改人值var Name = $(this).parents('ul').find('li').eq(3).text();var self = this;$('.Div3 input').eq(0).val(Company);$('.Div3 input').eq(1).val(Number);$('.Div3 input').eq(2).val(Name);// 点击保存$(".Div3").find('.D3-bt2').off('click')$(".Div3").find('.D3-bt2').click(function () {// 获取文本框输入内容var company = $('.Div3 input').eq(0).val();var number = $('.Div3 input').eq(1).val();var name = $('.Div3 input').eq(2).val();console.log(company);// 将插入的表格的数据替换成文本框输入的内容$(self).parents('ul').find('li').eq(0).text(company);$(self).parents('ul').find('li').eq(1).text(number);$(self).parents('ul').find('li').eq(3).text(name);// 获取时间var time = new Date();var year = time.getFullYear();var month = time.getMonth() + 1;var date = time.getDate();var hour = time.getHours();var minute = time.getMinutes();var second = time.getSeconds();var newTime = `${year}-${month}-${date} ${hour}:${minute}:${second}`;// 将插入的表格的时间替换成获取的时间$(self).parents('ul').find('li').eq(2).text(newTime);// 清空文本框$('.Div3 input').eq(0).val('');$('.Div3 input').eq(1).val('');$('.Div3 input').eq(2).val('');$(".Div3").css("display", "none");})})}// 添加// 点击添加按钮$(".Div1 .D1-button2").click(function () {$(".Div3").css("display", "block");// 点击保存$(".Div3").find('.D3-bt2').off('click')$(".Div3").find('.D3-bt2').click(function () {// 获取文本框输入内容var company = $('.Div3 input').eq(0).val();var number = $('.Div3 input').eq(1).val();var name = $('.Div3 input').eq(2).val();// 克隆表格中的第一个ul样式var Clone = $(".Div2-2").find('ul').eq(0).clone();//将获取的样式插入表格$(".Div2-2").eq(0).append(Clone);// 将插入的表格的数据替换成文本框输入的内容$(".Div2-2 ul").eq(-1).find('li').eq(0).text(company);$(".Div2-2 ul").eq(-1).find('li').eq(1).text(number);$(".Div2-2 ul").eq(-1).find('li').eq(3).text(name);// 获取时间var time = new Date();var year = time.getFullYear();var month = time.getMonth() + 1;var date = time.getDate();var hour = time.getHours();var minute = time.getMinutes();var second = time.getSeconds();var newTime = `${year}-${month}-${date} ${hour}:${minute}:${second}`;// 将插入的表格的时间替换成获取的时间$(".Div2-2 ul").eq(-1).find('li').eq(2).text(newTime);// 清空文本框$('.Div3 input').eq(0).val('');$('.Div3 input').eq(1).val('');$('.Div3 input').eq(2).val('');$(".Div3").css("display", "none");// 调用修改、删除、全选Fix()Delete()chance()})})// 点击X$(".Div3").find('.X').click(function () {// 清空文本框$('.Div3 input').eq(0).val('');$('.Div3 input').eq(1).val('');$('.Div3 input').eq(2).val('');$(".Div3").css("display", "none");})// 点击取消按钮$(".Div3").find('.D3-bt1').click(function () {// 清空文本框$('.Div3 input').eq(0).val('');$('.Div3 input').eq(1).val('');$('.Div3 input').eq(2).val('');$(".Div3").css("display", "none");})//点击搜按钮// Ul2储存未被选中的数组var Ul2 = [];// 点击搜索按钮$(".Div1 .D1-button1").click(function () {// 将Ul2中的数据添加到表格中$(".Div2-2").eq(0).append(Ul2)// 获取输入框内容var company = $('.Div1 input').eq(0).val();var number = $('.Div1 input').eq(1).val();var Ul1 = [];for (var i = 0; i < $(".Div2-2").find('ul').length; i++) {Li1 = $(".Div2-2").find('ul').eq(i).find('li').eq(0);Li2 = $(".Div2-2").find('ul').eq(i).find('li').eq(1);// 获取输入框和表格信息的对比返回值var textLi1 = Li1.text().indexOf(company);var textLi2 = Li2.text().indexOf(number);// 筛选符合要求的信息if (company != '' && textLi1 >= 0 && number == '') {Ul1.push($(".Div2-2").find('ul').eq(i))} else if (number != '' && company == '' && textLi2 >= 0) {Ul1.push($(".Div2-2").find('ul').eq(i))} else if (company != '' && number != '' && textLi1 >= 0 && Li2.eq(i + 1).text().indexOf(number) >= 0) {Ul1.push($(".Div2-2").find('ul').eq(i))} else {Ul2.push($(".Div2-2").find('ul').eq(i))}}// 移除表格全部信息$(".Div2-2").find("ul").remove();// 将符合要求的信息插入表格中$(".Div2-2").eq(0).append(Ul1)// 调用修改、删除、全选Fix()Delete()chance()})</script>
</body>
</html>
Jquery实现增删改查相关推荐
- jQuery表格增删改查
最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode. 1.首先我自己写了一个简单的div布局. 2.实现 ...
- 8.jQuery例子——增删改查
一.增加记录 1.Jquery中each遍历方法的使用 定义:jquery中提供了each方法类似JavaScript中的for(var i=0;i<length;i++).使用方式如下 < ...
- datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入 搜索 新增 编辑 删除 职业姓名性别爱好 //点击查找 $(" ...
- JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
- mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery
本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...
- html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- 基于Python Flask框架+jquery Ajax技术实现的增删改查（CRUD）+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能 登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面 注册界面,用的bootstrop的弹窗,用户名和密 ...
- 用ajax+jquery+json+css3+html5实现登录、注册、以及主页面的增删改查
主要思路 在登录界面,输入用户名和密码,失焦的时候,判断输入的用户名和密码是否符合相应的正则表达式的要求.如果符合,就发送ajax请求到服务端,服务端接受到请求,就把从页面中传来的数据和json文件里 ...
最新文章
- vue-cli脚手架
- Eclipase +PyDev(64位) 配置使用
- FMDatabase常见的几个操作
- 自用Java爬虫工具JAVA-CURL已开源
- python映射类型-Python中的映射数据类型 dict
- asp.net的几个错误
- 程序员面试题精选100题(37)-寻找丑数[算法]
- LIGHTOJ 1044（动态规划）
- SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版
- 符合语言习惯的Python优雅编程技巧
- 【转】WebServices:WSDL的结构分析
- MapXtreme 2005新增内容
- C算法编程题（七）购物
- python 基础简单猜数游戏
- 利用反射判断初始化后的对象所有属性是否为空判断对象指定属性是否为空
- NVIDIA 显卡信息（CUDA信息的查看）
- sum problem
- GRE tunnel 2
- 网络安全专栏——了解防火墙（图文介绍天网个人防火墙，实例测试）
- 二叉搜索树插入算法C#演示的代码
热门文章
- 【双子真经】详解五种不同周期的双子——双子巨蟹座(6/19-6/24)
- 谈谈对接芝麻信用踩的坑
- html静态页面引用百度地图报错 BMap is not defined
- java水彩画效果滤镜_Atitit Atitit 图像处理之 Oilpaint油画滤镜 水彩画 源码实现...
- 小工具: 听例句背单词
- 依靠可信AI的鲁棒性有效识别深度伪造，帮助银行对抗身份欺诈
- dynamic time warping matlab,Dynamic Time Warping 动态时间规整算法
- 用python庆祝生日_古天乐50大寿，郑秀文杜琪峰设宴庆祝，网友重提30年前那件事...
- 20172266遥感一班李安娜第四次笔记
- 2022广东省焊工（初级）考试题模拟考试题库及模拟考试