你可以使用
layui的table组件和form组件来实现动态
新增带下拉框的行。
首先，你需要在HTML中创建一个
空的table，并设置好表头，如下所示：
```html
<table id="demo" lay-filter="test"></table>
```
然后，在JavaScript中初始化table组件，并定义好
表格列的数据和渲染方式，如下所示：
```javascript
layui.use(['table', 'form'], function(){
var table =
layui.table;
var form =
layui.form;
//定义
表格列的数据
var cols = [[
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'gender', title: '性别', templet: '#genderTpl'}
]];
//渲染
表格
table.render({
elem: '#demo',
cols: cols,
data: []
});
//定义性别下拉框的模板
var genderTpl = '<select name="gender"><option value="男">男</option><option value="女">女</option></select>';
//监听表单的提交事件，添加新的数据行
form.on('submit(add)', function(data){
var newData = {name: data.field.name, age: data.field.age, gender: data.field.gender};
var oldData = table.cache.demo;
oldData.push(newData);
table.reload('demo', {data: oldData});
return false;
});
//将性别下拉框模板添加到HTML中
$('body').append('<script type="text/html" id="genderTpl">'+ genderTpl +'</script>');
});
```
在上面的代码中，我们首先定义了
表格列的数据和渲染方式，然后初始化了table组件，并将
空的
表格渲染出来。然后，我们定义了一个性别下拉框的模板，并将其添加到HTML中。最后，我们监听了表单的提交事件，在提交表单时，将新的数据添加到原有数据中，并重新加载
表格。
注意，上面的代码中，我们使用了form组件来监听表单的提交事件。因此，在HTML中，你需要创建一个表单，并为其添加一个监听事件，如下所示：
```html
<form class="
layui-form" lay-filter="addForm">
<div class="
layui-form-item">
<label class="
layui-form-label">姓名</label>
<div class="
layui-input-inline">
<input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">年龄</label>
<div class="
layui-input-inline">
<input type="text" name="age" lay-verify="required|number" placeholder="请输入年龄" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">性别</label>
<div class="
layui-input-inline">
<div class="
layui-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
<div class="
layui-input-inline">
{{# if (d.gender == "男") { }}男{{# } else { }}女{{# } }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="add">添加</button>
</div>
</div>
</form>
```
上面的代码中，我们为表单添加了一个监听事件，当表单被提交时，会触发JavaScript中的form.on('submit(add)')方法，从而实现动态
新增带下拉框的行。
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
