实现效果：
image.png
image.png
实现代码如下：
html
<!--记录面板-->
<div class="panel_style">
<div class="layui-row layui-col-space15">
<div class="card_style">
<div class="layui-card">
<div>
<span> </span>
<button type="button" id="addretestRecord"
class="layui-btn layui-btn-xs "
style="float: right">
<span class="glyphicon glyphicon-plus"
aria-hidden="true"></span>
</button>
</div>
<div class="layui-card-header">
<label class="record_label">测试日期</label>
<input id="datechoice1" type="text"
class="edittestRecord datechoice"
name="test_start_date">
</div>
<div><span> </span></div>
<div class="layui-card-body">
<div class="form-group">
<label class="record_label">进度</label>
<input class="edittestRecord" type="text"/>
<label class="record_label">未解决bug</label>
<input class="edittestRecord" type="text"/>
<label class="record_label">已解决bug</label>
<input class="edittestRecord" type="text"/>
<label class="record_label">后台 bug</label>
<input class="edittestRecord" type="text"/>
<label class="record_label">IOS bug</label>
<input class="edittestRecord" type="text"/>
<label class="record_label">Android bug</label>
<input class="edittestRecord" type="text"/>
<label class="record_label">H5 bug</label>
<input class="edittestRecord" type="text"/>
</div>
<div class="form-group">
<label class="record_label">备注</label>
<textarea
class="form-control record_textarea "></textarea>
</div>
<div class="form-group">
<input id="addmergetestRecords" type="text"
style="display:None" name="headers"/>
</div>
</div>
</div>
</div>
</div>
</div>
js
<script type="text/javascript">
var add = document.getElementById('addtestRecord');
var container_test = document.getElementById('container_test');
var node_test = container_test.nextSibling;
add.onclick = function () {
oDiv = document.createElement('div');
var dateChoiceSize = $('.datechoice').length +1;
var dateChoiceId = "datechoice"+dateChoiceSize;
oDiv.innerHTML = "<div class=\"panel_style\">\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"card_style\">\n" +
" <div class=\"layui-card\">\n" +
" <div>" +
" <span> </span>" +
" <div class=\"layui-card-header\">\n" +
" <label class = \"record_label\" >测试日期</label>\n" +
" <input id=\""+dateChoiceId+"\" type=\"text\" class=\"edittestRecord datechoice\" name=\"test_start_date\">\n" +
" </div>\n" +
" <div><span> </span></div>\n" +
" <div class=\"layui-card-body\">\n" +
" <div class=\"form-group\">\n" +
" <label class = \"record_label\" >进度</label>\n" +
" <input class=\"edittestRecord\" type=\"text\"/>\n" +
" <label class = \"record_label\" >未解决bug</label>\n" +
" <input class=\"edittestRecord\" type=\"text\"/>\n" +
" <label class = \"record_label\" >已解决bug</label>\n" +
" <input class=\"edittestRecord\" type=\"text\"/>\n" +
" <label class = \"record_label\" >后台 bug</label>\n" +
" <input class=\"edittestRecord\" type=\"text\" />\n" +
" <label class = \"record_label\" >IOS bug</label>\n" +
" <input class=\"edittestRecord\" type=\"text\" />\n" +
" <label class = \"record_label\" >Android bug</label>\n" +
" <input class=\"edittestRecord\" type=\"text\" />\n" +
" <label class = \"record_label\" >H5 bug</label>\n" +
" <input class=\"edittestRecord\" type=\"text\" />\n" +
" </div>\n" +
" <div class=\"form-group\">\n" +
" <label class = \"record_label\" >备注</label>\n" +
" <textarea class=\"form-control record_textarea \"></textarea>\n" +
" </div>\n" +
" <div class=\"form-group\">\n" +
" <input id=\"addmergetestRecords\" type=\"text\" style=\"display:None\" name=\"headers\"/>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
container_test.parentNode.insertBefore(oDiv, node_test)
node = oDiv.nextSibling;
}
$('#addtestRecord').click(function () {
layui.use('laydate', function () {
var laydate = layui.laydate;
//常规用法
var dateChoiceSize = $('.datechoice').length;
laydate.render({
elem: "#datechoice" + dateChoiceSize,
type: 'datetime'
});
})
})
</script>
网友评论