layui表格内select表单动态操作可以提交

这篇博客介绍如何在layui表格中实现select表单的动态操作,包括新增行、删除当前行,并且实现下拉框联动。当选择某一列的值时,下拉框内容会动态更新。提交时,表格数据将以特定格式发送。提供了HTML和JS代码示例,以及数据格式的说明。
摘要由CSDN通过智能技术生成

先上一段需求(可以对照下自己需求是否符合)

  1. 表格可以动态新增行,删除当前行。
  2. 新增的每一行(tr)包含三列(td)每一格分别一个下拉框,每列下拉框相同。
  3. 选择某一行第一个下拉框值后,与当前行第二个下拉框联动,数据为动态(后台传输)。
  4. 点击提交按钮后,将整个表格提交,每一行三个数据以逗号隔开,每一行数据以分号隔开。

示例图

说明:
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;
          
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值