js table的tr的删除添加

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();
    }

}