使用layui+jQuery实现点击删除单行数据

首先要用到layui的官网手册

地址:https://www.layui.com/

注意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实现点击删除单行数据的更多相关文章

  1. jquery对类的操作,添加,删除,点击添加,再点击删除

    jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)

  2. 利用jquery动态添加和删除表格的一行,并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  3. [PHP] JQuery+Layer实现添加删除自定义标签代码

    JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...

  4. Jquery学习笔记 --ajax删除用户,使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

  5. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  6. jQuery 表格中实现“删除线”的增进方法

    之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线. 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果. 这里有两个方法,是在不同时期写的 ...

  7. jQuery动态添加和删除表格行

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. layui jquery ajax,url,type,async,dataType,data

    $.ajax({ url: '/foensys/user/userDelete/'+data[0].id, type:"get", async:true, dataType:&qu ...

  9. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  10. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

随机推荐

  1. ECharts 柱状图横轴(X轴)文字内容显示不全

    1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局 原来布局 option = { g ...

  2. Sentinel熔断与限流

    1.简介 在线文档: https://sentinelguard.io/zh-cn/docs/system-adaptive-protection.html 功能: 流量控制 速率控制 熔断和限流 和 ...

  3. JZOJ 5062. 【GDOI2017第二轮模拟day1】航海舰队

    \(\text{Solution}\) 这还是 [Lydsy2017省队十连测] 的题 不得不说 \(FFT\) 在字符串匹配中的妙啊! 前面做了道一维的题,现在这是二维的 从题目入手,不考虑可不可达 ...

  4. JZOJ 5947.初音未来(miku)

    题目大意 维护一个数列 \(a_n\),\(m\) 次操作,每次对区间 \([l..r]\) 进行升序排序 求最后询问区间 \([L..R]\),输出 \(a_L,a_{L+1},···,a_{R}\ ...

  5. 【雅礼联考DAY02】Revolution

    #include<cstdio> #include<queue> using namespace std; const int N = 210 , M = 210000 , I ...

  6. JZOJ 2474. 【GDKOI 2021普及组DAY2】我的世界

    题解 这题很明显发现一个点到另一个点,必然最多只有一个进入下界的点和一个出来的点 分类讨论入点和出点的位置 要么都在 \(u->lca\) 或都在 \(lca->v\) 或分别有一个 那就 ...

  7. CF1781D 解题乱弹

    abc1057510554 老师说,搞这种数论题,就可以在 CF 上 number theory 板刷一个 1300-1900 就可以了. 然后发现连 1800 的题都做不出来,我可以退役力 QAQ ...

  8. 2023.2.26【模板】扩展Lucas定理

    2023.2.26[模板]扩展Lucas定理 题目概述 求\(\binom {n}{m} mod\) \(p\) 的值,不保证\(p\)为质数 算法流程 (扩展和普通算法毫无关系) 由于\(p\)不是 ...

  9. 彰显个性│github 和 gitlab 之自定义首页样式

    目录 个性首页 制作步骤 修改内容 个性首页 相信很多小伙伴在逛 github 和 gitlab 的时候 会发现很多开发者的首页异常的炫酷,如 https://github.com/autofelix ...

  10. K8s存储之Volume、PV、PVC、SC

    Volume Volume(存储卷)是Pod中能够被多个容器访问的共享目录.Kubernetes的Volume概念.用途和目的与Docker的Volume比较类似,但两者不能等价.首先,Kuberne ...