layui表格点击删除这行

您可以在 layui 表格中使用表格渲染完成后，给每一行添加一个删除按钮，然后通过按钮的点击事件来删除对应的行。具体实现方法如下：

1. 在表格渲染的时候给每一行添加一个删除按钮，可以使用 laytpl 模板引擎进行渲染，代码如下：

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. 接着，在按钮的点击事件中实现删除操作，代码如下：

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 请求将该行数据从后端数据库中删除，并在删除完成后更新表格中的数据。