使用JavaScript使用rowpan和colspan生成动态表

Question

我正在尝试通过用户根据必须生成的行和跨度值（格式如下）动态创建行和列来生成表。

示例输入

：

1) 50:1:2`50`50`50`50`50
2) 50:2:2`50`50`50`50`50
3) 50:2:2`50`50`50:2:1`50`50

其中50是单元格宽度，1：行跨度，2：colspan值

如果用户给出colspan，则求和单元格宽度。 我面临一些逻辑问题，可以帮助您并提出实现建议

以下是我的逻辑：

function createTable()
{
     var num_rows =2;
    var num_cols = 3;
    var inputTable = "50:1:2`50`50`50`50`50";
    var cells = null;
    var CELL_SEPERATOR = '`';
    var ROW_COL_SEPERATOR = ':';
    cells = inputTable.split(CELL_SEPERATOR);



    var theader = '<table border="1">\n';
    var tbody = '';
    var arrayCount =0;
    var rowspan = 0;
    var colspanFlag = false;
    for( var i=0; i<num_rows;i++)
    {
        tbody += '<tr>';
        var colspan = 0;
        for( var j=0; j<num_cols;j++)
        {
          var cell = cells[arrayCount];
          arrayCount++;
          var rwClSpan = cell.split(':');
   if(!colspanFlag){
   tbody += '<td';
   if(rwClSpan.length > 1){
   if(rwClSpan[1] > 1){
    tbody += ' rowspan="'+rwClSpan[1]+'" ';
    rowspan = parseInt(rwClSpan[1]);
   }
   if(rwClSpan[2] > 1){
    tbody += ' colspan="'+rwClSpan[2]+'" ';
    colspan = parseInt(rwClSpan[2]);
    colspanFlag = true;
   }
   }
   }
            tbody += '>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>'
        }
        tbody += '</tr>\n';
         colspanFlag = false;
    }

    var tfooter = '</table>';

    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;

}

jsfiddle链接

https://jsfiddle.net/onlinesolution/3t6hLksf/1/