用layui做一个表格有添加一行按钮和删除一行按钮详细指导

好的，下面是使用layui制作表格，并添加添加一行按钮和删除一行按钮的具体步骤：

1. 引入layui库和相关CSS、JS文件。

2. 在HTML文件中添加一个div标签，设置id为test，该div用于放置表格。

   <div id="test"></div>
    
   

   1.在JS文件中使用table.render方法创建一个表格，定义表头和数据等参数。

   table.render({
       elem: '#test',
       cols: [[
           {field: 'id', title: 'ID', width: 80},
           {field: 'username', title: '用户名', width: 120},
           {field: 'email', title: '邮箱', minWidth: 200},
           {field: 'operation', title: '操作', width: 120, templet: '#operationTpl'}
       ]],
       data: [
           {id: 1, username: '张三', email: 'zhangsan@qq.com'},
           {id: 2, username: '李四', email: 'lisi@qq.com'},
           {id: 3, username: '王五', email: 'wangwu@qq.com'}
       ]
   });
    
   

   2.在HTML文件中添加一个script标签，定义添加一行按钮和删除一行按钮的模板。

   <script type="text/html" id="operationTpl">
       <button class="layui-btn layui-btn-xs" lay-event="add">添加一行</button>
       <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除本行</button>
   </script>
    
   

   3.在JS文件中使用table.on方法监听操作按钮的点击事件，实现添加一行和删除一行的功能。

   table.on('tool(test)', function(obj){
       var data = obj.data;
       if(obj.event === 'add'){
           table.addRow('#test', {
               id: '',
               username: '',
               email: ''
           });
       } else if(obj.event === 'delete'){
           layer.confirm('确定要删除这一行吗？', function(index){
               obj.del();
               layer.close(index);
           });
       }
   });
    
   

3. 在上面的代码中，我们使用了table.addRow方法添加一行数据，并使用layer.confirm方法弹出确认框来提示用户是否确定要删除一行数据。

4. 最后，记得引入layui的CSS文件，否则样式可能会错乱。

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

   以上就是使用layui做一个表格，并添加添加一行按钮和删除一行按钮的详细指导。