使用layui+jQuery实现点击删除单行数据
使用layui+jQuery实现点击删除单行数据
首先要用到layui的官网手册
注意1. 此功能是在使用layui展示数据的基础上实现
3. 数据展示步骤连接:https://www.cnblogs.com/glwuzhang/p/11252987.html
2. 记得引用文件
1.进入手册页面的 ”示例“

2.在示例中找到 “数据表格” -> “数据操作” -> "查看代码" 。这就是layui内置的数据操作代码,分别复制红框,绿框,紫色框的代码到你的页面。

3.将红色框的代码复制,在数据展示列后追加一行 如下图。
将绿色框的代码复制到 html->body 中,不要放在js代码中,如下图。一个标签代表一个按钮,多余的删除即可。
将紫色框的代码放置到 js代码 layui.use 中任意位置 ,如下图。
我只做了删除所以把多余的代码都删了。

4.在监听工具条中,自带声明了一个 data ,这个data中是包含了点击当前行的所有数据。
所以我们可以使用jQuery的ajax发送data中需要的值,实现删除。

做完判断,和相应的弹框提示,layui的删除基本到这儿就结束了。
新萌分享知识,做的不是很好,大家将就的看看把~~~
使用layui+jQuery实现点击删除单行数据的更多相关文章
- jquery对类的操作,添加,删除,点击添加,再点击删除
jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- [PHP] JQuery+Layer实现添加删除自定义标签代码
JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...
- Jquery学习笔记 --ajax删除用户,使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- jQuery 表格中实现“删除线”的增进方法
之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线. 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果. 这里有两个方法,是在不同时期写的 ...
- jQuery动态添加和删除表格行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- layui jquery ajax,url,type,async,dataType,data
$.ajax({ url: '/foensys/user/userDelete/'+data[0].id, type:"get", async:true, dataType:&qu ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...
随机推荐
- Autodesk Maya2023 破解版安装教程(小白看了也说understand)
前言 Maya是Autodesk旗下的著名三维建模和动画软件,应用对象是专业的影视广告,角色动画,电影特技等.Maya功能完善,工作灵活,制作效率极高,渲染真实感极强,是电影级别的高端制作软件. 安装 ...
- Zstack和vmware的初步印象对比
先不说话,直接上截图吧,vmware的: zstack的: 读者不知道看出什么名堂没有?把浏览器缩放调到50%,vmware的产品线两页截屏还装不下:zstack虽然也要两屏,但都是块块,大致数了数, ...
- 一个诡异的 Pulsar InterruptedException 异常
背景 今天收到业务团队反馈线上有个应用往 Pulsar 中发送消息失败了,经过日志查看得知是发送消息时候抛出了 java.lang.InterruptedException 异常. 和业务沟通后得知是 ...
- JZOJ 3226. 【HBOI2013】ALO
题目 网上自己搜 解析 区间异或很容易想到可持久化字典树 但本题的关键是如何高效率求出以某个数为区间最大值时这个区间的范围 依题我们知道区间最长可到比它第二大的位置(开区间) 所以我们如果能找到每个数 ...
- JZOJ 1494. 密码
留个高精度的模板 \(Code\) #include<cstdio> #include<cstring> using namespace std; int n , a[5005 ...
- 【论文笔记】UNet
语义分割的U-Net网络结构Unet是2015年诞生的模型,它几乎是当前segmentation项目中应用最广的模型.Unet能从更少的训练图像中进行学习,当它在少于40张图的生物医学数据集上训练时, ...
- PostGIS之几何有效性
1. 概述 PostGIS 是PostgreSQL数据库一个空间数据库扩展,它添加了对地理对象的支持,允许在 SQL 中运行空间查询 PostGIS官网:About PostGIS | PostGIS ...
- GPS地图生成02之经典算法体验
经典的利用轨迹生成地图的算法与数据集可寻找于:Mapconstruction by pfoser Mapconstruction by pfoser数据集中,雅典数据集投影坐标系为(UTM, GGRS ...
- Reverse for 'blog_detail.html' not found.解决方法
初学django遇到了以下问题: 查找解决方法的时候发现有以下几个原因: 1.字母打错 2.多加了空格 随后 我发现 报错的代码中多加了'.html'..删掉后就没问题了.
- vue+html5实现上传图片
原理:dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件方案:vue项目,点击自己的上传文件图标,通过dispatchEvent主动触发一个自 ...