layui数据表格 添加 删除行的实现

Layui数据表格的添加和删除行可以通过以下步骤实现：

1. 添加行：通过表格的render方法中的done回调函数，在表格渲染完成后，可以通过jQuery或原生JavaScript等方式，向表格中添加行数据。

2. 删除行：通过表格的on方法，监听删除按钮的点击事件，获取当前行的数据，然后通过jQuery或原生JavaScript等方式，将该行数据从表格中删除。

具体实现可以参考以下代码示例：

添加行：

// 渲染表格
table.render({
  // ...
  done: function (res, curr, count) {
    // 在表格渲染完成后，添加新行数据
    var newRowData = {id: 4, name: '张三', age: 22, sex: '男'};
    var $tbody = $('#demo').next('.layui-table-box').find('.layui-table-body tbody');
    var trHtml = '<tr data-index="' + (count++) + '">';
    trHtml += '<td data-field="id"><div class="layui-table-cell laytable-cell-1-id">' + newRowData.id + '</div></td>';
    trHtml += '<td data-field="name"><div class="layui-table-cell laytable-cell-1-name">' + newRowData.name + '</div></td>';
    trHtml += '<td data-field="age"><div class="layui-table-cell laytable-cell-1-age">' + newRowData.age + '</div></td>';
    trHtml += '<td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">' + newRowData.sex + '</div></td>';
    trHtml += '</tr>';
    $tbody.append(trHtml);
  }
});

删除行：

// 监听删除按钮的点击事件
table.on('tool(test)', function (obj) {
  if (obj.event === 'delete') {
    // 获取当前行的数据
    var rowData = obj.data;
    // 通过jQuery或原生JavaScript等方式，将该行数据从表格中删除
    obj.del();
  }
});