需求:
1:点击新增区域的按钮的时候,会新增一行输入框,可以选择输入数据,输入时间
2:输入完成之后,点击保存按钮,将输入的时间以对象数组的格式提交给后端
3:每一组时间是一个对象,每个对象包括开始时间和结束时间,
三组就是三个对象,存放在数组里面。
提交到后端的格式
{"criminalFences":[{"startTime":"09:00","stopTime":"17:00"},{"startTime":"09:00","stopTime":"17:00"},{"startTime":"09:00","stopTime":"17:00"}]}
示例代码
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>保存时间</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="timeCont"></div>
<button type="button" class="btn blue" id="fatBtn">新增区域</button>
<button type="button" class="btn blue" id="addBtn">保存</button>
</body>
<script type="text/javascript">
/* 新增检测时间 */
$("#fatBtn").click(function() {
var htm = "";
htm += "<div class='form-group'>";
htm += "<label class='col-sm-3 control-label' >区域监测时间段:</label>";
htm += "<div class='col-sm-4'>";
htm += "<input type='text' class='form-control sleepStart1' name='startTime' value='09:00' ></input>";
htm += "</div>";
htm += "<div class='col-sm-4'>";
htm +="<input type='text' class='form-control sleepStop1' name='stopTime' value='17:00'></input>";
htm += "</div>";
htm += "</div>";
$('#timeCont').append(htm);
/* 删除时间 */
$(".dateDel").on("click", function() {
$(this).closest('.form-group').remove();
})
});
$("#addBtn").on("click", function() {
var params = {
criminalFences: getTimes(),
}
alert(JSON.stringify(params))
$.ajax({
contentType: 'application/json',
url: basePath + "/criminal",
data: JSON.stringify(params),
type: "post",
success: function(data) {
},
error: function(data) {
msg(5, "服务器繁忙");
}
});
})
//获取时间周期
function getTimes() {
var times = new Array(); //创建list集合
$("input[name='startTime']").each(function(i, value) {
var obj = {};
obj.startTime = $(this).val();
times.push(obj);
});
$("input[name='stopTime']").each(function(i, value) {
times[i].stopTime = $(this).val();
});
return times;
}
</script>
</html>
效果:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。