使用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. 从 Newtonsoft.Json 迁移到 System.Text.Json

    一.写在前面 System.Text.Json 是 .NET Core 3 及以上版本内置的 Json 序列化组件,刚推出的时候经常看到踩各种坑的吐槽,现在经过几个版本的迭代优化,提升了易用性,修复了 ...

  2. vscode在UBUNTU下使用CMAKE编译

    打开一个含有CMakeLists.txt的文件夹 在.vscode要建立三个json文件才能对Cmake工程进行编译和调试,分别是c_cpp_properties.json,launch.json和t ...

  3. ROS多机通讯

    1.主机: sudo /etc/hosts 写入从机的地址和用户名: 192.168.31.14    raspi2 2.从机 sudo /etc/hosts 写入主机的地址和用户名 192.168. ...

  4. Hadoop 及Spark 分布式HA运行环境搭建

    作者:京东物流 秦彪 工欲善其事必先利其器,在深入学习大数据相关技术之前,先手动从0到1搭建一个属于自己的本地Hadoop和Spark运行环境,对于继续研究大数据生态圈各类技术具有重要意义.本文旨在站 ...

  5. 00-DLL劫持&C语言远程加载shellcode

    0x01 杀软拦截检测规则引导-DLL劫持上线 准备工具 cs vs2019 dll劫持工具:https://bbs.pediy.com/thread-224408.htm 极速PDF:https:/ ...

  6. 在wifi的5G频率下无法加载图片解决方法

    开始是这样的:因为我家wifi支持300兆的网速,所以换了一个荣耀的路由器,换了一根网线,但是发现5G频率有的应用加载不了图片,所以查了很多资料想了很多办法,终于解决了, 解决方法如下: 1.这是DH ...

  7. vs修改默认端口

    1.右键项目属性进去修改 2.,用txt打开sln解决方案,框框中的就是你当前的端口号

  8. UnoCSS 简化 CSS 的书写

    CSS 样式太多,重复写 在学习 UnoCSS 之前,我提出几个问题: 你是否有过写完了 HTML 之后,跳转到 style 写 CSS 这样来回跳转的痛苦? 你是否有过不知道如何给节点取类名的痛苦( ...

  9. ArcGIS for Android 地图图文查询

    ArcGIS for Android 地图图文查询 1.前期项目准备 1.1. 创建新工程 新建一个空活动项目 选择语言.平台,修改命名等 1.2. 添加ArcGIS SDK build.gradle ...

  10. AWK nr nf

    https://blog.csdn.net/sh13661847134/article/details/118018456 awk中NF,NR的含义awk中NF和NR的意义,其实你已经知道NF和NR的 ...