先上一段需求(可以对照下自己需求是否符合)
- 表格可以动态新增行,删除当前行。
- 新增的每一行(tr)包含三列(td)每一格分别一个下拉框,每列下拉框相同。
- 选择某一行第一个下拉框值后,与当前行第二个下拉框联动,数据为动态(后台传输)。
- 点击提交按钮后,将整个表格提交,每一行三个数据以逗号隔开,每一行数据以分号隔开。
示例图
说明:
1.数据库名,这一列选项内容,每行值都相同。
2.数据库名的选项会和模式联动(选第一个第二个联动)。
3.点击新增会新增一行。
4.点击删除会删除当前行。
上一段代码(html)
// layui表单结合layui手动表格
<div id="tableBox" class="layui-table layui-form">
<table class="layui-table layui-form">
<colgroup>
<col width="100">
<col width="100">
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>数据库名</th>
<th>模式</th>
<th>权限</th>
<th>
<button type="button" style="padding:0px 12px" class="layui-btn layui-btn-sm" id="addTr">新增</button>
</th>
</tr>
</thead>
<tbody id="tableRow"></tbody>
</table>
</div>
上一段代码(js部分)
// 表格新增
var clickCont = 0;