效果展示（可随意增加删除数据）
<body>
<div class="layui-fluid">
<form class="layui-form">
<div class="layui-card">
<div class="layui-card-header layui-row layui-col-space15">
<tr class="layui-col-md3 layui-col-xs12">
<input class="layui-btn" type="button" name="add" value="增加发货">
<input class="layui-btn" type="button" name="delall" value="全部删除">
</tr>
</div>
<div class="layui-card-body layui-table-body">
<div class="layui-table">
<script type="text/html" id="insertTr" >
<tr class="itme layui-row layui-col-space15">
<td id="c_sku_count_#idx#">
<input class="sku-id layui-input" type="text" value="第#idx#次发货" required="required" style="float: right;background:#CCCCCC" disabled >
<input type="hidden" name="order[send][#idx#][send_edit_count]" value="#idx#" disabled >
</td>
<td id="c_sku_#idx#">
<input class="layui-input" autocomplete="off" lay-verify="required" placeholder="顾客需求时间" name="order[send][#idx#][sale_time]" id="deliveryTime_#idx#" readonly>
</td>
<td id="c_sku_weght_#idx#">
<input type="text" name="order[send][#idx#][send_count]" lay-verify="required" placeholder="发货数量" autocomplete="off" id="send_count_#idx#" class="layui-input" oninput="clearCount(this,'number')">
</td>
<td>
<input type="text" name="order[send][#idx#][set_baby]" lay-verify="required" class="layui-input" id="set_baby_#idx#" placeholder="搭雏" oninput="clearCount(this,'number')">
</td>
<td><button class="layui-btn" name="del">删除</button></td>
</tr>
</script>
<table id="tab">
<br/>
<tr class="layui-row layui-col-space15">
<th>发货次数</th>
<th>顾客需求时间</th>
<th>发货数量</th>
<th>搭雏</th>
<th>操作</th>
</tr>
</table>
</div>
</div>
</div>
<div class="layui-row layui-col-space15" align="right">
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label"></label>
<button class="layui-btn" lay-filter="save" lay-submit="">提交数据</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
layui.use(['form', 'layer','laydate'],
function() {
$ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
$(function(){
$(':button[name=add]').click(function(){
insertTr();
})
$('button[name=del]').click(function(){
$(this).parents('tr').remove();
})
$(':button[name=delall]').click(function(){
$('.itme').remove();
gradeI=1;
})
})
var gradeI=1;
function insertTr(){
//gradeId的值替换为#idx#再页面使用
var html =$($('#insertTr').html().replace(/#idx#/g,gradeI));
$('#tab').append(html);//在指定后加入新内容
html.find('button[name=del]').click(function(){
$(this).parents('tr').remove();
});
var $goodsList = $('.widget-goods-list');
gradeI++;
//执行一个laydate实例
laydate.render({
elem: '#deliveryTime_'+(gradeI-1)//指定元素
,type: 'datetime'
,trigger: 'click'
,done: function(value, date){
layer.alert('你选择的销售时间是：' + value );
}
});
}
//执行一个laydate实例
laydate.render({
elem: '#sale_time'//指定元素
,type: 'datetime'
,trigger: 'click'
,done: function(value, date){
layer.alert('你选择的销售时间是：' + value );
}
});
//监听提交
form.on('submit(save)', function(data) {
console.log(data.field);
var order_type_id = $('#order_type_id').val();
var goods_type_id = $('#goods_type_id').val();
var order_state = $('#order_state').val();
var customer_id = $('#customer_id').val();
var apply_medicine = $('#apply_medicine').val();
var admin_id = $('#admin_id').val();
if(order_type_id == 0){
layer.msg("对不起，请选择相应订单类型",{icon:2,time:2000})
return false;
}
if(goods_type_id == 0){
layer.msg("对不起，请选择相应销售类型---物品名称",{icon:2,time:2000})
return false;
}
if(order_state == -1){
layer.msg("对不起，请选择相应订单状态",{icon:2,time:2000})
return false;
}
if(customer_id == 0){
layer.msg("对不起，请选择客户",{icon:2,time:2000})
return false;
}
if(admin_id == 0){
layer.msg("对不起，请选择相应销售员",{icon:2,time:2000})
return false;
}
if(apply_medicine == -1){
layer.msg("对不起，请选择相应上药情况",{icon:2,time:2000})
return false;
}
//发异步，把数据提交给php
$.ajax({
url:'/back/orderAdd', /*接口域名地址*/
type:'post',
data:{
data :data.field
},
success:function(res){
if (res.code == 0){
layer.alert(res.msg, {
icon: 2
});
}else{
layer.alert(res.msg, {
icon: 6
},function(){
window.parent.location.reload();
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
});
}
},
error : function(res) {
layer.alert(res.msg, {
icon: 2
},function(){
window.parent.location.reload();
});
}
});
return false;
});
});
</script>
</body>
</html>
![Layui实现一个简单的 布局[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)