layui表格点击新增，在新增一行添加一个序号，两个可输入的input还有一个删除

可以通过layui的table.on('toolbar()')事件来监听表格的工具栏事件，从而实现在新增一行时添加序号、可输入的input和删除按钮。具体实现步骤如下：

1. 给表格添加一个 toolbar，代码如下：

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">新增</button>
  </div>
</script>

2. 在JavaScript中监听 toolbar 的点击事件，代码如下：

// 渲染表格
table.render({
  elem: '#demo',
  toolbar: '#toolbar',
  cols: [
    [
      { field: 'id', title: '序号', width: 80 },
      { field: 'name', title: '姓名', edit: 'text' },
      { field: 'age', title: '年龄', edit: 'text' },
      { fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 100 }
    ]
  ],
  data: []
});

// 监听工具栏点击事件
table.on('toolbar(test)', function(obj){
  if(obj.event === 'add'){
    // 获取表格数据
    var data = table.cache.demo;
    // 获取当前最大的id
    var maxId = 0;
    if(data.length > 0){
      maxId = data[data.length - 1].id;
    }
    // 新增一行数据
    var newRow = {
      id: maxId + 1,
      name: '',
      age: ''
    };
    table.addRow('#demo', newRow);
  }
});

3. 在表格中通过模板引擎添加删除按钮，代码如下：

// 渲染表格
table.render({
  elem: '#demo',
  toolbar: '#toolbar',
  cols: [
    [
      { field: 'id', title: '序号', width: 80 },
      { field: 'name', title: '姓名', edit: 'text' },
      { field: 'age', title: '年龄', edit: 'text' },
      { fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 100 }
    ]
  ],
  data: []
});

// 监听工具栏点击事件
table.on('toolbar(test)', function(obj){
  if(obj.event === 'add'){
    // 获取表格数据
    var data = table.cache.demo;
    // 获取当前最大的id
    var maxId = 0;
    if(data.length > 0){
      maxId = data[data.length - 1].id;
    }
    // 新增一行数据
    var newRow = {
      id: maxId + 1,
      name: '',
      age: ''
    };
    table.addRow('#demo', newRow);
  }
});

// 监听操作列的事件
table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'delete'){
    // 删除当前行
    obj.del();
  }
});

// 定义操作列的模板
var operateTpl = '<div class="layui-btn-group">' +
  '<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>' +
  '</div>';

// 渲染表格
table.render({
  elem: '#demo',
  toolbar: '#toolbar',
  cols: [
    [
      { field: 'id', title: '序号', width: 80 },
      { field: 'name', title: '姓名', edit: 'text' },
      { field: 'age', title: '年龄', edit: 'text' },
      { fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 100 }
    ]
  ],
  data: []
});

// 监听工具栏点击事件
table.on('toolbar(test)', function(obj){
  if(obj.event === 'add'){
    // 获取表格数据
    var data = table.cache.demo;
    // 获取当前最大的id
    var maxId = 0;
    if(data.length > 0){
      maxId = data[data.length - 1].id;
    }
    // 新增一行数据
    var newRow = {
      id: maxId + 1,
      name: '',
      age: ''
    };
    table.addRow('#demo', newRow);
  }
});

// 监听操作列的事件
table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'delete'){
    // 删除当前行
    obj.del();
  }
});

// 定义操作列的模板
var operateTpl = '<div class="layui-btn-group">' +
  '<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>' +
  '</div>';

// 渲染表格
table.render({
  elem: '#demo',
  toolbar: '#toolbar',
  cols: [
    [
      { field: 'id', title: '序号', width: 80 },
      { field: 'name', title: '姓名', edit: 'text' },
      { field: 'age', title: '年龄', edit: 'text' },
      { fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 100 }
    ]
  ],
  data: []
});

// 监听工具栏点击事件
table.on('toolbar(test)', function(obj){
  if(obj.event === 'add'){
    // 获取表格数据
    var data = table.cache.demo;
    // 获取当前最大的id
    var maxId = 0;
    if(data.length > 0){
      maxId = data[data.length - 1].id;
    }
    // 新增一行数据
    var newRow = {
      id: maxId + 1,
      name: '',
      age: ''
    };
    table.addRow('#demo', newRow);
    // 重新渲染表格
    table.init('test', {
      cols: [
        [
          { field: 'id', title: '序号', width: 80 },
          { field: 'name', title: '姓名', edit: 'text' },
          { field: 'age', title: '年龄', edit: 'text' },
          { fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 100 }
        ]
      ],
      data: data
    });
  }
});

// 监听操作列的事件
table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'delete'){
    // 删除当前行
    obj.del();
    // 重新渲染表格
    table.init('test', {
      cols: [
        [
          { field: 'id', title: '序号', width: 80 },
          { field: 'name', title: '姓名', edit: 'text' },
          { field: 'age', title: '年龄', edit: 'text' },
          { fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 100 }
        ]
      ],
      data: data
    });
  }
});