动态创建表格/动态合并单元格

动态创建表格/动态合并单元格
=====================================================================
jsp:
<div data-options="region:'center',title:''" style="padding:5px;background:#fff;border:true; ">
<div>
<form id="ExcelTable" style="padding-left: 20px;"> 

</form>
</div>


---------------------------------------------------------------------
js:
// 创建表格
function createTable(rowcnt, colcnt) {
    var table = "<table id=\"data\" name=\"TableName\"  class='table' rules='all' style='table-layout:fixed;border-bottom:1px solid;border-right:1px solid;'>";
    table += "<tr>";
    // 将纵坐标填入单元格(第一行)
    for (var i = 0; i <= colcnt; i++) {
        if (i == 0) {// 第一行第一列的单元格样式
            table += "<td style='text-align: center;width:27px;height: 27px;border: 0;word-break: break-all;'valign='bottom'>" + " " + "</td>";
        } else if (i == colcnt) {// 第一行最后一列的单元格样式
            table += "<td style='text-align:center;border:0;border-bottom:1px solid;border-right: 1px solid #fff;width:27px;height: 27px;word-break: break-all;'valign='bottom'>Y" + i + "</td>";
        } else {// 第一行其他列的单元格样式
            table += "<td style='text-align:center;border:0;border-bottom:1px solid;width:27px;height: 27px;word-break: break-all;'valign='bottom'>Y" + i + "</td>";
        }
    }
    table += "</tr>";
    // 从第二行开始创建停车场单元格
    for (var i = 1; i <= rowcnt; i++) {
        table += "<tr>";
        // 每行的第一列为停车场单元格的横坐标
        if (i != rowcnt) {// 出去最后一行的所有行的样式
            table += "<td style='text-align:right;width:28px;height: 27px;border:0;border-right: 1px solid;word-break: break-all;'>X" + i + "</td>";
        } else {// 最后一行的样式
            table += "<td style='text-align:right;width:28px;height: 27px;border:0;border-right: 1px solid;border-bottom: 1px solid #fff;word-break: break-all;'>X" + i + "</td>";
        }
        for (var j = 1; j <= colcnt; j++) {
            // 非最后一行时
            if (i != rowcnt) {
                if (j == 1) { // 第二列时的单元格样式
                    table += "<td id='X" + i + "Y" + j + "' class='XY' οnclick='SetColor(event)' style='text-align:center;border:0;border:1px dashed #000000;width:27px;height: 27px;border-collapse: collapse;word-break: break-all;'>"
                    +"</td>";
                } else if (j == colcnt) {// 最后一列的单元格样式
                    table += "<td id='X" + i + "Y" + j + "' class='XY' οnclick='SetColor(event)' style='text-align:center;border:0;border-bottom:1px dashed #000000;border-right: 1px solid;width:27px;height: 27px;border-collapse: collapse;word-break: break-all;'>"
                    +"</td>";
                } else {// 其他列的单元格样式
                    table += "<td id='X" + i + "Y" + j + "' class='XY' οnclick='SetColor(event)' style='text-align:center;border:0;border:1px dashed #000000;width:27px;height: 27px;border-collapse: collapse;word-break: break-all;'>"
                    +"</td>";
                }
            } else {// 最后一行时
                if (j != colcnt) {// 非最后一列的单元格样式
                    table += "<td id='X" + i + "Y" + j + "' class='XY' οnclick='SetColor(event)' style='text-align:center;border:0;border-right:1px dashed #000000;border-bottom:1px solid #000000;width:27px;height: 27px;border-collapse: collapse;word-break: break-all;'>"
                    +"</td>";
                } else {// 最后一列的单元格样式
                    table += "<td id='X" + i + "Y" + j + "' class='XY' οnclick='SetColor(event)' style='text-align:center;border:0;border-bottom:1px solid #000000;border-right:1px dashed #000000;border-right:1px solid;width:27px;height: 27px;border-collapse: collapse;word-break: break-all;'>"
                    +"</td>";
                }
            }
        }
        table += "</tr>";
    }
    table += "</table>";
    $("#ExcelTable").html(table);
}


// 合并单元格
function joinCell(parkingcode, parkarea) {
    var parkareaS = parkarea.split(":")[0].replace('X', '').replace('Y', ',').split(",");
    var parkareaE = parkarea.split(":")[1].replace('X', '').replace('Y', ',').split(",");
    var sx = parseInt(parkareaS[0]); // 开始横坐标
    var sy = parseInt(parkareaS[1]); // 开始纵坐标
    var ex = parseInt(parkareaE[0]); // 结束横坐标
    var ey = parseInt(parkareaE[1]); // 结束纵坐标
    if (sx > ex) {// 如果开始横坐标大于结束横坐标则开始和结束横坐标互换
        var flg = sx;
        sx = ex;
        ex = flg;
    }
    if (sy > ey) { //如果开始纵坐标大于结束纵坐标则开始和结束纵坐标互换
        var flg = sy;
        sy = ey;
        ey = flg;
    }
    // 获取所有单元格
    var tds = $("#ExcelTable").find('td');
    for (var i = tds.length - 1; i >= 0; i--) {
        var td = tds[i];
        // 当开始坐标不是所选区域左上角坐标时:
        if (("X" + sx + "Y" + sy) != (parkarea.split(":")[0])) {
            // 将开始坐标的id替换为XY:
            if (td.id == (parkarea.split(":")[0])) {
                td.id = "XY";
            }
            // 将所选区域左上角坐标的id替换成开始坐标的id
            if (td.id == ("X" + sx + "Y" + sy)) {
                td.id = parkarea.split(":")[0];
            }
        }


    }
    // 遍历所选区域的行
    for (var i = sx; i <= ex; i++) {
        // 遍历所选区域的列
        for (var j = sy; j <= ey; j++) {
            // 获取每个单元格的id
            var id = "#X" + i + "Y" + j;
            if (i == sx && j == sy) {// 跳过左上角第一个单元格
                id = "#X" + i + "Y" + (j + 1);
            }
            if (("X" + i + "Y" + j) == (parkarea.split(":")[0])) {// 跳过开始坐标id的单元格
                continue;
            }
            // 根据id,删除左上角单元格之外的所选区域的所有单元格
            $(id).remove();
        }
    }
    // 删除开始坐标位置的单元格
    $("#XY").remove();
    // 根据开始和结束坐标合并单元格
    // 合并列数
    var colsnum = ex - sx + 1;
    // 合并行数
    var rowsnum = ey - sy + 1;
    var id = "#" + parkarea.split(":")[0];
    // 合并行
    $(id).attr('rowspan', colsnum);
    // 和并列
    $(id).attr('colspan', rowsnum);
    // 添加停车位代码
    $(id).html(parkingcode);
    // 设置停车位边框和颜色
    $(id).css({ 'border': '1px solid', 'background-color': colorB });

}

=================================

结果如下: