Layui如何给lay-data插入按钮呢？如何通过按钮获取Id值呢？

作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。

学习格言：不读书的人,思想就会停止。——狄德罗

⛪️个人主页：进入博主主页

推荐系列：点击进入

欢迎小伙伴们访问到博主的文章内容，在浏览阅读过程发现需要纠正的地方，烦请指出，愿能与诸君一同成长！

目录

文章内容如下

✏️一、添加显示数的表格

✏️二、给lay-data插入按钮

✏️三、通过按钮获取Id值

✏️四、精简输出

✏️总结

---

文章内容如下

---

✏️一、添加显示数的表格

 要在Layui中插入修改和删除按钮，可以使用Table组件的自定义工具栏功能。首先，在HTML页面中添加一个用于显示数据的表格：

    
借书卡管理系统
    新增借记卡
    

        

        

            
ID
            
名称
            
性别
            
时间
            
押金
            
操作
        
        
    

---

✏️二、给lay-data插入按钮

最后，在HTML页面的

---

✏️三、通过按钮获取Id值

想要通过Layui按钮获取cid的id值，是指在点击某个按钮后获取当前行的cid值吗？您可以通过以下步骤实现：

 One / 在表格设置中，为操作列的每个按钮添加一个自定义属性，例如data-cid="{{d.cid}}"，其中d代表当前行的数据对象。

 Two / 在JavaScript代码中，定义一个点击事件的监听函数，当按钮被点击时，获取该按钮所在行的cid值

 //删除
    function buttonDelete(){
       layui.use(['jquery','table'],function (){
           //引用layui方法
           var $ = layui.jquery ;
           var table = layui.table ;
           // 监听操作按钮的点击事件
           table.on('tool(cityTable)', function(obj){
               var data = obj.data;  // 获取当前行的数据
               var cid = data.cid;
               var na = data.name;// 获取当前行的cid值
               console.log(cid);  // 输出cid值，可以做其他处理
               alert(cid)
                
                $.ajax({
                    url:'xxx',
                    type:'xx',
                    data:{
                        xxx
                    }
                    
                })
           });
       })
   }

在上述代码中，cityTable是表格的id，tool是Layui表格的工具列事件名，obj.data表示当前行的数据对象，obj.data.cid表示当前行的cid值。您可以根据具体需求进行进一步处理。

---

✏️四、精简输出

 要通过Layui按钮获取cid的id值，是指在点击某个按钮后获取当前行的cid值吗？您可以通过以下步骤实现：

 One / 在表格设置中，为操作列的每个按钮添加一个自定义属性，例如data-cid="{{d.cid}}"，其中d代表当前行的数据对象

ID
名称
性别
时间
押金
操作

 Two / 在JavaScript代码中，定义一个点击事件的监听函数，当按钮被点击时，获取该按钮所在行的cid值。

layui.use(['table','dropdown','jquery','layer'],function(){
     //调用 layui 封装的方法
     var table = layui.table ;
     var dropdown = layui.dropdown ;
     var $ = layui.jquery;
     var layer = layui.layer;
    
    // 监听操作按钮的点击事件
    table.on('tool(cityTable)', function(obj){
        var data = obj.data;  // 获取当前行的数据
        var cid = data.cid;  // 获取当前行的cid值
        console.log(cid);  // 输出cid值，可以做其他处理
    });

});

---

✏️总结

好了，写完了，如果对Layui熟悉度高的话，直接看‘精简输出部分’就好了，剩下的那些显示数据和删除或修改的逻辑就不过多的去展示出来了，主要的主题就是Layui如何给lay-data插入按钮，如何通过按钮获取Id值；大家如果觉得有什么不对的地方，望指出，愿与诸君共同学习进步！