layui 动态添加表格行

在 layui 中动态添加表格行，可以通过以下步骤实现：

1. 获取表格对象

var table = layui.table;

2. 定义数据数组

var data = [
  {id: 1, name: '张三', age: 20},
  {id: 2, name: '李四', age: 22},
  {id: 3, name: '王五', age: 24}
];

3. 渲染表格

table.render({
  elem: '#demo',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'}
  ]],
  data: data
});

4. 动态添加表格行

// 添加一行数据
var newRow = {id: 4, name: '赵六', age: 26};
data.push(newRow);
table.reload('demo', {
  data: data
});

这样就可以动态添加一行数据到表格中了。注意，需要通过 `table.reload` 方法重新加载数据，才能更新表格。另外，`demo` 是表格的 ID，需要根据实际情况修改。

相关问题

layui 动态添加表格

可以使用 layui 的表格组件来实现动态添加表格。下面是一个示例代码：

<table id="demo" lay-filter="test"></table>
<script>
  // 定义表格数据
  var data = [
    {id: 1, name: '张三', age: 20},
    {id: 2, name: '李四', age: 22},
    {id: 3, name: '王五', age: 25}
  ];
  
  // 初始化表格
  layui.use(['table'], function () {
    var table = layui.table;
    
    table.render({
      elem: '#demo',
      data: data,
      cols: [[
        {field: 'id', title: 'ID'},
        {field: 'name', title: '姓名'},
        {field: 'age', title: '年龄'}
      ]]
    });
    
    // 添加数据
    var newData = {id: 4, name: '赵六', age: 28};
    data.push(newData);
    table.reload('demo', {data: data});
  });
</script>

在上面的代码中，我们首先定义了表格数据。然后使用 layui 的 table 组件初始化表格，将数据渲染到表格中。接着，我们添加了一条新的数据，并使用 `table.reload` 方法重新加载表格数据，实现了动态添加表格的效果。

layui 动态添加编辑表格单元格

在layui中，动态添加和编辑表格单元格可以通过两种方式实现。

第一种方式是使用layui的表格渲染方法render()。首先，我们可以创建一个table标签，并设置id，如下所示：

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

然后，通过调用layui的table.render()方法，传入一个配置对象来渲染表格，如下所示：

table.render({
  elem: '#demo',
  data: data,
  cols: [[
    {field: 'name', title: '姓名', edit: 'text'},
    {field: 'age', title: '年龄', edit: 'text'},
    {field: 'score', title: '分数', edit: 'text'},
  ]],
});

在cols对象中，我们设置了三个单元格，每个单元格都可以编辑。通过设置edit属性为'text'，我们将单元格设置为可编辑文本框。接下来，我们需要通过调用table.reload()方法来动态添加单元格数据，如下所示：

table.reload('demo', {
  data: newData,
});

其中，'demo'是需要重新加载的表格id，newData是新的数据。通过这种方式，我们可以动态添加和编辑表格中的单元格。

第二种方式是使用layui的form模块。我们可以创建一个table标签和一个form标签，并设置id，如下所示：

<table id="demo" lay-filter="test"></table>
<form class="layui-form" lay-filter="dataForm"></form>

然后，我们可以通过调用form.render()方法，传入一个配置对象来渲染表单，如下所示：

form.render(null, 'dataForm');

在表格中添加数据按钮的点击事件中，我们可以通过调用form.val()方法来动态向表单中添加数据，如下所示：

form.val('dataForm', {
  name: '张三',
  age: 18,
  score: 90,
});

其中，'dataForm'是表单的lay-filter属性值，name、age、score是表单中的字段名，'张三'、18、90是字段对应的值。通过这种方式，我们可以动态添加和编辑表格中的单元格。

以上就是在layui中动态添加和编辑表格单元格的两种方式，可以根据具体需求选择适合的方式进行操作。