layui表格通过点击tr改变这一行的颜色

$("body").on('click','.layui-table-body tr ',function () {
          console.log(this);
          var data_index=$(this).attr('data-index');//得到当前的tr的index
          console.log($(this).attr('data-index'));
          $(".layui-table-body tr").attr({"style":"background:#FFFFFF"});//其他tr恢复颜色
          $(".layui-table-body tr[data-index="+data_index+"]").attr({"style":"background:#99ff99"});//改变当前tr颜色

});

此代码块应放入监听事件中,layui-table-body是表格的类名,data-index是这一行的索引,也就是id。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以在 layui 表格使用表格渲染完成后,给每一行添加一个删除按钮,然后通过按钮的点击事件来删除对应的。具体实现方法如下: 1. 在表格渲染的时候给每一行添加一个删除按钮,可以使用 laytpl 模板引擎进渲染,代码如下: ```javascript table.render({ elem: '#test', url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'email', title:'邮箱', width:150}, {field:'operate', title:'操作', toolbar:'#barDemo', width:120} ]], page: true }); // 操作栏渲染 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('确定删除该数据吗?', function(index){ obj.del(); //删除对应tr)的DOM结构,并更新缓存 layer.close(index); //TODO 发送删除请求 }); } }); // 操作栏模板 <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` 2. 接着,在按钮的点击事件实现删除操作,代码如下: ```javascript table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('确定删除该数据吗?', function(index){ obj.del(); //删除对应tr)的DOM结构,并更新缓存 layer.close(index); // 发送删除请求 $.ajax({ url: '/api/delete', type: 'post', data: {id: data.id}, success: function(res){ if(res.code === 0){ layer.msg('删除成功'); } else { layer.msg('删除失败'); } }, error: function(){ layer.msg('删除失败'); } }); }); } }); ``` 在这个例子,我们使用了 layer 弹窗和 layui表格组件实现了点击删除的功能。当用户点击删除按钮时,弹出确认框询问用户是否确定删除,如果用户确定,则通过 AJAX 请求将该数据从后端数据库删除,并在删除完成后更新表格的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值