js
<script>
let topList = [];
function add() {
let table = document.getElementById("addTable");
let length = $("#addTable").find("tr").length;
let recharge = $("#recharge").val().trim();
let give = $("#give").val().trim();
let name = $("#name").val().trim();
let start = $("#start").val().trim();
if (start === "" || start === null) {
alert("请填写开始时间")
return;
}
let end = $("#end").val().trim();
if (end === "" || end === null) {
alert("请填写结束时间")
return;
}
if (name === "" || name === null) {
alert("请填写活动名称")
return;
}
if (recharge === "" || recharge === null) {
alert("请填写充值活动")
return;
}
if (give === "" || give === null) {
alert("请填写充值活动")
return;
}
var row = table.insertRow(length);
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1);
cell1.innerHTML = recharge;
cell2.innerHTML = give;
let cell3 = row.insertCell(2);
cell3.innerHTML = "<input type='button' value='删除' οnclick='del(this)'/> ";
let topAdd = {}
topAdd.name = name;
topAdd.content = "充值" + recharge + ",赠送" + give;
topAdd.startTime = start;
topAdd.endTime = end
topList.push(topAdd)
}
//后台交互
function save() {
$.ajax({
url: '/topAdd/topAdd',
contentType: "application/json;charset=UTF-8",
type: 'post',
dataType: 'json',
data: JSON.stringify(topList),
success: function () {
alert("success")
}
})
}
//删除当前tr
function del(p) {
let rowIndex = p.parentNode.parentNode.rowIndex;
topList = topList.filter((value, index) => {
return index != rowIndex - 2
})
console.log(topList)
p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
}
</script>
html
<div class="activity-content-body">
<h2>添加充值活动</h2>
<div class="activity-name-body">
<div class="activity-name">活动名称:</div>
<div><input type="text" id="name"></div>
</div>
<div class="activity-content">
<div class="table-content-desc">活动内容:</div>
<div>
<table id="addTable">
<tbody>
<tr>
<td>充值多少</td>
<td>赠送多少</td>
</tr>
<tr>
<td><input type="text" id="recharge"></td>
<td><input type="text" id="give"></td>
<td class="table-image">
<div onclick="add()" data-cid="ikfcc30ctggzfg8" data-link_cid="" class="widget svg_icon_path"
style="width: 24px; height: 24px; left: 721px; top: 391px; z-index: 103; border-color: rgb(187, 187, 187); border-width: 0px; border-style: solid; color: rgb(16, 16, 16); font-weight: normal; font-style: normal; opacity: 1;">
<span class="icon svg-icon-wrap svg-fa5 svg-fa5-plus-circle-fas-wrap"
style="width: 24px; height: 24px; min-width: 24px; min-height: 24px;"><svg
xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 512 512" width="24"
height="24" style="fill: rgb(16, 16, 16);"><path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg></span>
<div class="region gesture "></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div></div>
</div>
<div class="top-activity">
<div>活动开始时间:</div>
<div class="input-block">
<input placeholder="开始日期" id="start" type="text">
</div>
</div>
<div class="top-activity1">
<div>活动结束时间:</div>
<div class="input-block">
<input placeholder="结束日期" id="end" type="text">
</div>
</div>
<div class="save">
<button type="button" class=" btn btn-primary" onclick="save()">保存</button>
</div>
</div>
后台接收
@PostMapping("topAdd")
@ApiOperation(value = "添加活动时间",notes = "参数为活动集合的json字符串")
@ResponseBody
public ResponseEntity<?> topAdd(@RequestBody String jsonTopList){
try {
List<top> list = new ObjectMapper().readValue(jsonTopList, new TypeReference<List<top>>(){});
service.topAdd(list);
} catch (JsonProcessingException e) {
e.printStackTrace();
return ErrorResponseEntity.badRequest("添加失败");
}
return ResponseEntity.ok().build();
}
}