使用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 ...
随机推荐
- Rpc-实现Zookeeper注册中心
1.前言 本文章是笔主在声哥的手写RPC框架的学习下,对注册中心的一个拓展.因为声哥某些部分没有保留拓展性,所以本文章的项目与声哥的工程有部分区别,核心内容在Curator的注册发现与注销,思想看准即 ...
- day13-自定义拦截器
自定义拦截器 1.什么是拦截器 说明: 拦截器与过滤器的区别 SpringMVC 的拦截器(Interceptor)与 Java Servlet 的过滤器(Filter)类似,它主要用于拦截用户的请求 ...
- Zstack 鼎阳SDS6204示波器和Archiver Appliance的重度测试2
https://blog.csdn.net/weixin_43767046/article/details/113748775 https://blog.csdn.net/weixin_4376704 ...
- k8s中使用prometheus operator监控外部服务器部署的windows exporter
k8s中使用prometheus operator监控外部服务器部署的windows exporter 0.文档说明 (1)Prometheus Operator是一个流行的k8s集群监控套件,项目地 ...
- P5787 二分图 /【模板】线段树分治
\(\text{Solution}\) 线段树分治的模板 对时间分治,线段树下标表示时间 在线段树上处理每条覆盖当前区间的边,对当前的时间区间求答案 小区间的信息可以由大区间一路下来得到,那么答案就是 ...
- Os-hackNos-3
Os-hackNos-3 目录 Os-hackNos-3 1 信息收集 1.1 端口扫描 1.2 后台目录扫描 1.2.1 目录分析 2 爆破后台登录页面 2.1 BP爆破 2.2 hydra爆破 3 ...
- vue的数据更新视图不同步的处理用Vue.$set()
// vue的数据更新视图不同步的处理用Vue.$set() // 通过Vue.set方法设置data属性vm.$set(最终值,数组索引,数组值) ==Vue.$set(arr,index,val) ...
- RocketMQ - 消费者Rebalance机制
客户端是通过Rebalance服务做到高可靠的.当发生Broker掉线.消费者实例掉线.Topic 扩容等各种突发情况时,消费者组中的消费者实例是怎么重平衡,以支持全部队列的正常消费的呢? Rebal ...
- vue中引入静态图片
vue+webpack中,可以使用require imageList: [ { url: require('../image/pig.png') } ] vue+vite没有require方法 // ...
- Qt中的多窗体编程(续一)
在前面一节中,已经把所有需要的窗体都创建好了,下面将依次实现预设的功能. 一.实现点击菜单打开模式子窗体的功能. 1.在编辑模式下双击Forms下的"mainWindow.ui", ...