layui 表格内嵌套input 输入框，还可以动态添加行 ，删除行，提交表格内表单到json

可以使用layui自带的表格组件和form组件实现。首先，需要在表格中使用lay-data属性存储json格式的数据，然后在表格中使用laytpl模板引擎将数据渲染成表格行。在表格中嵌套input输入框，需要使用lay-filter属性标识该输入框，以便在表单提交时获取输入框的值。使用form组件监听表单提交事件，获取表单数据并转换成json格式，即可实现提交表格内表单到json。

动态添加行可以使用layui的表格方法，如table.addRow()，删除行可以使用table.deleteRow()。在添加或删除行后需要重新渲染表格并重新绑定表单提交事件，以便能够获取新的表单数据。

以下是示例代码：

HTML部分：

<table class="layui-table" lay-data="{&quot;data&quot;: [{&quot;name&quot;: &quot;张三&quot;, &quot;age&quot;: &quot;18&quot;}, {&quot;name&quot;: &quot;李四&quot;, &quot;age&quot;: &quot;20&quot;}]}">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" lay-filter="name"></td>
      <td><input type="text" lay-filter="age"></td>
      <td><button class="layui-btn layui-btn-sm add-row">添加行</button></td>
    </tr>
    {{# layui.each(d.data, function(index, item){ }}
    <tr>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td><button class="layui-btn layui-btn-sm delete-row">删除行</button></td>
    </tr>
    {{# }); }}
  </tbody>
</table>

JS部分：

layui.use(['table', 'form'], function(){
  var table = layui.table;
  var form = layui.form;
  
  // 表格渲染
  table.init('table', {
    // 表格高度
    height: 'full-200',
    // 表格数据更新后重新渲染
    done: function(){
      form.render();
    }
  });
  
  // 监听添加行按钮点击事件
  $('.add-row').click(function(){
    table.addRow('table', [{
      name: '',
      age: ''
    }]);
  });
  
  // 监听删除行按钮点击事件
  $('.delete-row').click(function(){
    var tr = $(this).parents('tr');
    table.deleteRow('table', tr);
  });
  
  // 监听表单提交事件
  form.on('submit', function(data){
    console.log(data.field);
    return false;
  });
});