html 代码 :
xml复制代码<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('交强险保单信息')}:</label>
<div class="col-xs-12 col-sm-8">
<table class="table table-responsive fieldlist fieldlist1" data-name="row[traffic_insurance]" data-template="testtpl" data-tag="tr">
<tr>
<td>交险开始时间</td>
<td>交险结束时间</td>
<td>保单号</td>
<td>保险公司</td>
<td>保险公司联系电话</td>
<td>费用(元)</td>
</tr>
<tr>
<td colspan="5"><a href="javascript:;" class="btn btn-sm btn-success btn-append btn-append1"><i class="fa fa-plus"></i> 追加</a></td>
</tr>
<textarea name="row[traffic_insurance]" class="form-control hide" cols="30" rows="5">{$row.traffic_insurance}</textarea>
</table>
</div>
</div>
<!--定义模板,模板语法使用Art-Template模板语法-->
<script type="text/html" id="testtpl">
<tr class="form-inline">
<td><input type="text" data-num="<%=index%>" name="row[<%=name%>][<%=index%>][starttime]" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" value="<%=row['starttime'] ? row['starttime'] : ''%>" size="12"></td>
<td><input type="text" name="row[<%=name%>][<%=index%>][endtime]" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" value="<%=row['endtime'] ? row['endtime'] : ''%>" size="12" ></td>
<td><input type="text" name="row[<%=name%>][<%=index%>][ordersn]" class="form-control" value="<%=row['ordersn'] ? row['ordersn'] : ''%>" size="5"></td>
<td><input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name'] ? row['name'] : ''%>" size="5"></td>
<td><input type="text" name="row[<%=name%>][<%=index%>][phone]" class="form-control" value="<%=row['phone'] ? row['phone'] : ''%>" size="5"></td>
<td><input type="text" name="row[<%=name%>][<%=index%>][price]" class="form-control" value="<%=row['price'] ? row['price'] : ''%>" size="5"></td>
<td><span class="btn btn-sm btn-danger btn-remove btn-remove1"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></td>
</tr>
</script>
js代码:
javascript复制代码$(document).on("fa.event.appendfieldlist", ".fieldlist1 .btn-append", function (e, obj) {
let index1 = $('.fieldlist1 .form-inline').length;
if(index1 >= 1){ //这里限制只能追加一个,超过一个追加按钮隐藏
$(this).hide();
}
})
//控制点击关闭取消
$(document).on('click', '.btn-remove1',function(){
if($('.fieldlist1 .form-inline').length <= 0){ //当小于一个长度时出现追加按钮
$('.btn-append1').show();
}
});