使用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. cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置 行:1 字符: 1

    出现问题原因: 使用vscode终端powershell控制台查看cnpm版本或者运行cnpm的相关命令时提示如标题错误(cmd控制台提示:'cnpm' 不是内部或外部命令,也不是可运行的程序或批处理 ...

  2. Mac监控键盘输入并执行动作

    背景 电脑的安全是非常重要的,特别是里面的敏感数据,若是被有心之人利用,那后果不堪设想. 所以我们部门定下了一个规矩,谁离开工位要是不锁屏,就可以在部门群发送一个消息:我请大家吃鸡翅. oh,技术出身 ...

  3. echar 多个图形显示时,点击显示隐藏然后样式缺失,变得非常小

    原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常 ...

  4. Vite 项目添加 Sass/Scss 并配置全局样式

    (1)在 Vite 项目里,只需要安装 sass: npm i -D sass (2)Sass 的全局变量,需要在vite.config.ts配置一项: css: { preprocessorOpti ...

  5. Python Socket 基础多用户编程

    简介   写下这篇小记的原因是想记录一下自己学习Python Socket编程的心路历程.之前在中专的时间学过一些基础的Socket编程,知道了一些比较基础的内容比如基础的socket.bind()类 ...

  6. mysql的双1设置是什么?

    innodb_flush_log_at_trx_commit和sync_binlog 两个参数是控制MySQL磁盘写入策略以及数据安全性的关键参数.如果innodb_flush_log_at_trx_ ...

  7. odoo Web Controllers 学习总结

    环境 odoo-14.0.post20221212.tar Web Controllers Controllers 控制器需要提供可扩展性,就像Model,但不能使用相同的机制,因为先决条件(已加载模 ...

  8. 360 quake 网络空间测绘引擎真的很不错

    最近通过使用360 quake搜索引擎,发现真的能够比较准确的找到数据,对比fofa,shodan这种免费用户使用体验真的很好,搜到的数据很是全面,但是搜索的资产是国内的ip时会做脱敏处理.有时间大家 ...

  9. 09 spark连接mysql数据库

    安装启动检查Mysql服务.netstat -tunlp (3306) spark 连接mysql驱动程序.–cp /usr/local/hive/lib/mysql-connector-java-5 ...

  10. leetcode刷题(二)

    1.栈 逆波兰表达式求值 根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分.给定逆波兰表 ...