JQuery table相关

最近在做报表的需求，前端之前的前辈用的是beetl模版，增加个搜索功能简直要命，最后直接用jquery去拼接。

1.查询

这里查询按钮简单的前端我就不写了，主要是js的方法要怎么去写和拼接，我这块业务是表中表，套娃有点复杂。主要的逻辑是先把最外层的表追加到html中，再把子表追加进主表，其中主表和字表需要有index关联。

searchByAgeAndSubject = function () {
    let id = $("#id").val();
    //这是我的两个查询条件的input，训练者年龄和训练项目
    let trainAge = $("#trainAge").val();
    let trainSubjectName = $("#trainSubjectName").val();
    console.log(id + ":" + trainAge  + ":" + trainSubjectName);
    //ajax请求的地址（id用了@PathVariable注解，其他两个参数为可选项）
    let finalUrl = "/train/trainSelect/" + id + "?age=" + trainPoliceAge + "&subjectName=" + trainSubjectName;
    $.ajax({
        type: "POST",
        url: finalUrl,
        contentType: "application/json",
        dataType: "json",
        success: function (trainDetail) {
            //清除主表和字表的数据
            $("tbody").children().remove();
            //eval字符串解析成json
            let trainPlanDetailList = eval(JSON.stringify(trainDetail.plan.planDetailList));
            let registrationList = eval(JSON.stringify(trainDetail.registrationList));
            let trainPersonArray = eval(JSON.stringify(trainDetail.plan.planPsList));
            let trScore = "";
            for (let i = 0; i < trainPersonArray .length; i++) {
                //训练员信息（主表）
                let index = Number(i) + Number(1);
                let personItem = trainPersonArray [i];
                let tr = "<tr>"
                    + "<td class='wraptd'></td>"
                    + "<td class='wraptd'>" + personItem .courtName + "</td>"
                    + "<td class='wraptd'>" + personItem .name + "</br>（" + personItem .age + "岁）</td>"
                    + "<td class='wraptd'>"
                    + "<table id='personTrainCoreTable_" + index + "' class='wraptable'>"
                    + "<thead>"
                    + "<tr>"
                    + "<th class='wrapth' style='width: 20%'>考核科目</th>"
                    + "<th class='wrapth' style='width: 20%'>成绩</th>"
                    + "<th class='wrapth' style='width: 10%'>单位</th>"
                    + "<th class='wrapth' style='width: 15%'>分数</th>"
                    + "<th class='wrapth' style='width: 20%'>备注</th>"
                    + "</tr>"
                    + "<tbody id='zibiao'>"
                    + "</tbody>"
                    + "</thead>"
                    + "</table>"
                    + "</td>"
                    + "</tr>";
                if (trainSubjectName == null || trainSubjectName === "") {
                    //如果训练项目名称为空，则表示查询所有，直接追加所有训练员信息到表格
                    $("#personTrainTable").append(tr);
                }
                // 训练员成绩（子表）
                for (let j = 0; j < registrationList.length; j++) {
                	//用来和主表关联的id
                    let indexScore = Number(j) + Number(1);
                    let trainPlanDetail= trainPlanDetailList[j];

                    /*已经登记的值*/
                    let achievement = "";
                    let unit = "";
                    let score = "";
                    let remark = "";
                    let flag = "";
                    if ((trainPlanDetail.sex !== "1" && trainPlanDetail.sex !== "2")
                        || (trainPlanDetail.sex === "1" && personItem.sex === "男")
                        || (trainPlanDetail.sex === "2" && personItem.sex === "女")) {
                        //只有训练员员性别和训练计划性别相同时才会追加成绩表
                        for (let k = 0; k < registrationList.length; k++) {
                            let registration = registrationList[k];
                            if (registration.pcId === personItem.pcId
                                && registration.subjectId === trainPlanDetail.subjectId) {
                                achievement = registration.achievement;
                                unit = registration.unit;
                                score = registration.score;
                                remark = registration.remark;
                                flag = registration.status;
                            }
                            trScore = "<tr id='tr_" + indexScore + "' subjectId='" + trainPlanDetail.subjectId + "'>"
                                + "<td class='wraptd'>" + trainPlanDetail.subjectName + "</td>"
                                //成绩
                                + "<td class='wraptd'>"
                                + "<input id='achievement_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
                                + " value='" + achievement + "'"
                                + " autocomplete='off' type='text' "
                                + " class='form-control'"
                                + " οnclick=\"JxglExaminationPlanAdd.getScore(\'" + personItem.pcId + "','" + trainPlanDetail.subjectId + "')\""
                                + " placeholder='选择或者手动输入成绩' style='text-align: center;' >"
                                + "</td>"

                                //单位
                                + "<td class='wraptd'>"
                                + "<input id='" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
                                + " value= '" + trainPlanDetail.unit + "' "
                                + " autocomplete='off' type='text' "
                                + " class='form-control' readonly='readonly' style='text-align: center' >"
                                + "</td>"

                                //分数
                                + "<td class='wraptd'>"
                                + "<input id='unit_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
                                + " value= '" + score + "' "
                                + " autocomplete='off' type='text' "
                                + " class='form-control' "
                                + " placeholder='请录入分数' style='text-align: center' >"
                                + "</td>"
                                //备注信息
                                + "<td class='wraptd'>"
                                + "<input id='remark_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
                                + " value= '" + remark + "' "
                                + " autocomplete='off' type='text' "
                                + " class='form-control' "
                                + " placeholder='备注信息' >"
                                + "</td>"
                                + "<td class='wraptd'>";
                            //判断免考
                            if (flag === '2') {
                                trScore = trScore + "<input type='checkbox' id='flag_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "' checked=true></td>"
                            } else {
                                trScore = trScore + "<input type='checkbox' id='flag_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "' ></td>"
                            }
                            //补充tr尾标签
                            trScore = trScore + "</tr>";
                        }
                        if (trainSubjectName != null && trainSubjectName !== "") {
                            //如果训练项目名称不为空，则表示查询指定项目，仅在项目性别和警员性别一致时追加
                            $("#personTrainTable").append(tr);
                        }
                        //追加到指定警员信息table
                        $("#personTrainCoreTable_" + index).append(trScore);
                    }
                }
            }
            //序号追加
            let oTable = document.getElementById("psList");
            for (let count = 0; count < oTable.rows.length; count++) {
                oTable.rows[count].cells[0].innerHTML = (count + 1);
            }
        },
        error: function (trainDetailError) {
            console.log("请求失败：" + trainDetailError);
        }
    });
};

2.追加序号

正文

//序号追加psList为tbody的id
let oTable = document.getElementById("psList");
for (let count = 0; count < oTable.rows.length; count++) {
	oTable.rows[count].cells[0].innerHTML = (count + 1);
}

3.子标题

正文

在这里插入代码片

4.子标题

正文

在这里插入代码片

5.子标题

正文

在这里插入代码片