layui表格增删改查

layui是一款优秀的前端UI框架，其中包含了丰富的组件，包括表格组件，可以用来实现表格的增删改查功能。

首先，在HTML页面中引入layui的相关文件：

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

然后，在页面中添加一个表格：

<table class="layui-table" lay-filter="test">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>20</td>
      <td>
        <button class="layui-btn layui-btn-xs layui-btn-normal">编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
      </td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>22</td>
      <td>
        <button class="layui-btn layui-btn-xs layui-btn-normal">编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
      </td>
    </tr>
  </tbody>
</table>

接着，使用JavaScript代码初始化表格：

layui.use('table', function(){
  var table = layui.table;
  
  //执行渲染
  table.render({
    elem: '#test', //绑定元素
    cols: [[ //标题栏
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'},
      {fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]],
    data: [ //数据
      {id: '001', name: '张三', age: 20},
      {id: '002', name: '李四', age: 22}
    ]
  });
});

最后，添加表格的增删改查功能：

layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data; //获取当前行数据
    var layEvent = obj.event; //获取lay-event对应的值
    
    if(layEvent === 'edit'){ //编辑
      layer.open({
        type: 2,
        title: '编辑',
        content: 'edit.html?id=' + data.id,
        area: ['500px', '400px'],
        btn: ['保存', '取消'],
        yes: function(index, layero){
          //保存数据的逻辑
          layer.close(index); //关闭弹窗
        }
      });
    } else if(layEvent === 'delete'){ //删除
      layer.confirm('确定要删除吗？', function(index){
        //删除数据的逻辑
        layer.close(index); //关闭弹窗
      });
    }
  });
  
  //监听提交
  form.on('submit(add)', function(data){
    //添加数据的逻辑
    layer.closeAll();
    return false;
  });
  
});

以上代码实现了一个简单的表格增删改查功能，你可以根据自己的需求来修改。