Let"s take a look at the picture first.
the code is as follows
-html-
< form action= "" class= "form-horizontal" >
<div class="dl_box fr" style="margin-right:8px">
<button type="button" id="btn_addtr" class="dl_one btn btn-w-m btn-primary btn-xs"></button>
</div>
<div class="ys_table">
<table id="tab" style="display: none">
<tbody>
<tr>
<td align="center">
<input type="text" name="NO" size="2" value="1"/>
</td>
<td align="center">
<input type="text" name="1" placeholder=""/>
</td>
<td align="center">
<input type="text" name="2" placeholder=""/>
</td>
<td align="center">
<select name="3" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</td>
<td align="center">
<input type="text" name="date_start" placeholder="" style="cursor:pointer"/>
</td>
<td align="center">
<input type="text" name="date_end" placeholder="" style="cursor:pointer"/>
</td>
<td>
<i class="fa fa-minus-circle red" onclick="deltr(this)"></i>
</td>
</tr>
</tbody>
</table>
<table id="huizhi" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="text" name="NO" size="2" value="1" />
</td>
<td align="center">
<input type="text" name="1" placeholder=""/>
</td>
<td align="center">
<input type="text" name="2" placeholder="" />
</td>
<td align="center">
<select name="3" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</td>
<td align="center">
<input type="text" name="date_start" placeholder="" id="date_start" style="cursor:pointer"/>
</td>
<td align="center">
<input type="text" name="date_end" placeholder="" id="date_end" style="cursor:pointer"/>
</td>
<td>
<i class="fa fa-minus-circle red" onclick="deltr(this)"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="sl_box" style="margin-top:10px">
<button type="button" id="baocun" class="sl_one col-sm-1 btn btn-w-m btn-success"></button>
<button type="button" id="" class="sl_two col-sm-1 btn btn-w-m btn-white" onclick="javascript：history.back();return false;"></button>
</div>
</form>
-js-
< script type= "text/javascript" >
//
layui.use("laydate", function(){
var laydate = layui.laydate;
var start = laydate.render({
elem: "-sharpdate_start",
max: -0,
done: function (value, date, endDate) {
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date
}; //
end.config.value = {
year: date.year,
month: date.month - 1,
date: date.date
}; //
}
});
var end = laydate.render({
elem: "-sharpdate_end",
max: -0,
done: function (value, date, endDate) {
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
}; //
}
});
});
//
$(function () {
var show_count = 20; //
var count = 1; //
$("-sharpbtn_addtr").click(function () {
var length = $("-sharphuizhi tbody tr").length;
if (length < show_count) //
{
$("-sharptab tbody tr").clone().appendTo("-sharphuizhi tbody"); //
changeIndex();
}
})
})
function changeIndex() {
var i = 1;
var x = 1;
var y = 1;
$("-sharphuizhi tbody tr").each(function () { //tab tbodytr
$(this).find("input[name="NO"]").val(iPP);//
$(this).find("input[name="date_start"]").attr("id","date_start"+ (xPP));//name=date_startid
$(this).find("input[name="date_end"]").attr("id","date_end"+ (yPP));//name=date_endid
});
layui.use("laydate", function(){
var laydate = layui.laydate;
//
var start = laydate.render({
elem: ("-sharpdate_start" + (xPP - 1)),
max: -0,
done: function (value, date, endDate) {
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date
}; //
end.config.value = {
year: date.year,
month: date.month - 1,
date: date.date
}; //
}
});
//
var end = laydate.render({
elem: ("-sharpdate_end" + (yPP - 1)),
max: -0,
done: function (value, date, endDate) {
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
}; //
}
});
});
}
//
function deltr(opp) {
var length = $("-sharphuizhi tbody tr").length;
//alert(length);
if (length <= 1) {
layer.alert("");
} else {
$(opp).parent().parent().remove();//
changeIndex();
}
}
</script>
Welcome improvement