js动态生成一个相邻的单元格内容相同的则进行合并table表格

js动态生成一个相邻的单元格内容相同的则进行合并table表格

合并前效果

合并后效果：

js代码

/* 重现表格数据 */
    var dateDiff = null;
    var categoryName = null;
    var cdmCategoryId = null;
    var orderdata = null;
    var orderdataCount = null;
    var newOrder = null;
    var dutyDayList=[];
	function parseDutyForm(data,para) {
		var SDate = $("#dmdStartDate").datepicker("getValue");
		var EDate = $("#dmdEndTime").datepicker("getValue");
        categoryName = data.dcaCategoryName; //类别名称
        cdmCategoryId = data.cdmCategoryId; //类别id
        dateDiff = getDateDiff(SDate, EDate);//开始时间和结束时间之间相差的天数
        orderdata=(data.cdmOrderData ).split("?"); //修改时每天值班时间用？间隔
        console.log("orderdata="+orderdata);
        dutyDayList=data.dutyDayList;
        //第一行 类别名称
        var title = "<tr style='background-color:#337ab7;color:white;font-size:13px;font-weight: bold'><td rowspan='3' align='center' style='border: 2px solid #B3D0F4; padding:10px 20px 15px 20px; width:120px; height:30px; word-break: keep-all;white-space:nowrap;'> 日期</td><td rowspan='3' align='center' style='border: 2px solid #B3D0F4; padding:10px 20px 15px 20px; width:80px; height:30px;word-break: keep-all;white-space:nowrap;'>星期</td>"
        //岗位名称 行
        var jodTr="<tr style='background-color:#337ab7;color:white;font-size:13px;font-weight: bold'>";
        //班次名称 行
        var orderTr="<tr style='background-color:#337ab7;color:white;font-size:13px;font-weight: bold'>";
        var count=0;
        var tdPeopleCount=0;
        for(var t=0;t<orderdata.length;t++){
        	//需要渲染的集合数据（表格需要的数据）
            newOrder = orderdata[t].split(";");
            orderdataCount=newOrder.length;
            console.log("orderdata.length="+orderdata.length);
            console.log("newOrder="+newOrder);
            console.log("orderdataCount="+orderdataCount);
            if(count==0){
                var num = 0;
                //该数组是存储表格中colspan变量的数组
                var printJobArr =[];
                //表格中colspan的值
                var jonPos = 0;
                //调用该方法将集合newOrder中相同的内容转换为colspan的值保存到数组printJobArr中，newOrder先进行排序，将相同的元素放在一起，再调用下面的方法
                printJobNameArrPush(newOrder,jonPos,printJobArr);
                for(var i = 0; i< newOrder.length; i++){
                    var orderID = (newOrder[i].split("*")[0]).split("&")[0];
                    var orderName = (newOrder[i].split("*")[0]).split("&")[1];
                    var orderSTime = (newOrder[i].split("*")[0]).split("&")[2];
                    var orderETime = (newOrder[i].split("*")[0]).split("&")[3];
                    var jobId = ((newOrder[i].split("*")[1]).split("%")[0]).split("&")[0];
                    var jobName = ((newOrder[i].split("*")[1]).split("%")[0]).split("&")[1];
                    console.log("jobName="+jobName);
                    num ++;
                    if(num==1){
                    	//表头第一行需要合并的列数是已知的所以直接合并即可
                        title = title + "<td  id='" + cdmCategoryId + "' align='center' colspan='"+newOrder.length+"' style='border: 2px solid #B3D0F4; padding:10px 0px 15px 0px; width:"+newOrder.length+"*150px; height:30px; word-break: keep-all;white-space:nowrap;' >" + categoryName + "</td>";
                    }
                    //表头第二行就是用到上面的数组的数据进行合并的
                    var jobTd = printJobArr[i]==0?"":"<td colspan='"+printJobArr[i]+"' id='" + jobId + "' class='jobTd' align='center' style='border: 2px solid #B3D0F4; padding:10px 0px 15px 0px; width:150px; height:30px; word-break: keep-all;white-space:nowrap;'>" + jobName + "</td>"
                    jodTr = jodTr + jobTd;
              
                    orderTr = orderTr + <td colspan='"+printOrderArr[i]+"' id='" + orderID + "' align='center' style='border: 2px solid #B3D0F4; padding:10px 0px 15px 0px; width:150px; height:30px; word-break: keep-all;white-space:nowrap;' >" + orderName + "</td>";
                    count++;
                }
            }
        }
        title = title+ "</tr>";
        jodTr = jodTr+ "</tr>";
        orderTr = orderTr+ "</tr>";
        $("#dutyform").append(title);
        $("#dutyform").append(jodTr);
        $("#dutyform").append(orderTr);
        for(var m = 0; m< dutyDayList.length; m++) {
            var date = new Date(Date.parse(dutyDayList[m]));
            //var tDate = addDate("d",date,m);
            var aDate = formatterDate(date,"ymd");
            var week = getWeek(date);
            var item = "<tr>";
            item = item + "<td id='"+aDate+"' align='center'  style='font-size:15px;padding:10px 20px 15px 20px; width:80px; height:30px; font-weight: bold; border: 2px solid #B3D0F4; word-break: keep-all; white-space:nowrap;'>"+aDate+"</td><td id='"+aDate+"_"+m+"' align='center'  style='font-size:15px;padding:10px 20px 15px 20px; width:80px; height:30px; font-weight: bold; border: 2px solid #B3D0F4; word-break: keep-all; white-space:nowrap;'>"+week+"</td>";
            var tdPeople = "";
            for(var n = 0;n < newOrder.length; n++) {
                var jobId = ((newOrder[n].split("*")[1]).split("%")[0]).split("&")[0];
                var jobName = ((newOrder[n].split("*")[1]).split("%")[0]).split("&")[1];
                tdPeople = tdPeople + "<td id='p"+jobId+"_"+m+"_"+n+"' align='center' style='width:80px; height:30px; border: 2px solid #B3D0F4; word-break: keep-all; white-space:nowrap;' οndrοp='drop(this)' οndragοver='allowDrop(event)' onClick='checkList(this)'><ul id='" +jobId+ "_" +n+ "' class='dutyTd'></ul></td>"
            }
            item = item + tdPeople;
            item = item + "</tr>";
            $("#dutyform").append(item);
        }
        //上面是表格拼接  下面是数据填充
        for(var t=0;t<orderdata.length;t++){
            var newOrder = orderdata[t].split(";");
            for(var i = 0; i< newOrder.length; i++){
                var orderID = (newOrder[i].split("*")[0]).split("&")[0];
                var orderName = (newOrder[i].split("*")[0]).split("&")[1];
                var orderSTime = (newOrder[i].split("*")[0]).split("&")[2];
                var orderETime = (newOrder[i].split("*")[0]).split("&")[3];
                var jobId = ((newOrder[i].split("*")[1]).split("%")[0]).split("&")[0];
                var jobName = ((newOrder[i].split("*")[1]).split("%")[0]).split("&")[1];
                var data=newOrder[i];
                var dutyPoliceData = (newOrder[i].split("%")[1]).split("@");
                console.log("data="+data);
                console.log("dutyPoliceData="+dutyPoliceData);
                if(dutyPoliceData[0].split("/")[0].indexOf(",") != -1) {//存在逗号间隔 及需要切割成数组
                    var policeIds = (dutyPoliceData[0].split("/")[0]).split(",");  //policeId
                    var policeName = (dutyPoliceData[0].split("/")[1]).split(",");
                    for(var l = 0; l < policeIds.length; l++) {
                        var li = "<li id='id_p"+jobId+"_"+l+"-"+policeIds[l]+"' style='font-size:13px;margin:8px'>"
                            +policeName[l]+ "<input class='hTd' readonly='true' type='hidden' value='"+policeName[l]+"'/><a href='javascript:void(0);' id='p"+jobId+"_"+l+"-"+policeIds[l]+"' style='color:red;font-weight: bold' onClick='deleteSelPolice(this)'></a></li>"
                        $("#p" +jobId+ "_" +t+"_"+i+ " ul").append(li);
                    }
                } else {//不存在逗号间隔 不需要切割成数组  及一个元素
                    var policeIds = dutyPoliceData[0].split("/")[0];  //policeId
                    var policeName = dutyPoliceData[0].split("/")[1];
                    var li = "<li id ='id_p" +jobId+ "_" +"o"+ "-" +policeIds+ "' style='font-size:13px;margin:8px'>"
                        +policeName+ "<input class='hTd' readonly='true' type='hidden' value='" +policeName+ "'/><a href='javascript:void(0);' id='p" +jobId+ "_" +0+ "-" +policeIds+ "' style='color:red;font-weight: bold' onClick='deleteSelPolice(this)'></a></li>"
                    $("#p" +jobId+ "_" +t+"_"+i+ " ul").append(li);
                }
            }
        }
	    $("#dutyList_view").mCustomScrollbar({
			theme : "minimal-light",
			autoExpandScrollbar : true,
			axis: "y"
		});
	}

    function printJobNameArrPush(list,jonPos,printJobArr) {
        for(var i = 0; i< list.length; i++){
            if(i==0){
                printJobArr.push(1);
                jonPos = 0;
            }else {
                if(((list[i-1].split("*")[1]).split("%")[0]).split("&")[1]==((list[i].split("*")[1]).split("%")[0]).split("&")[1]){
                    printJobArr[jonPos] += 1;
                    printJobArr.push(0);
                }else {
                    printJobArr.push(1);
                    jonPos = i;
                }
            }
        }
    }