Динамическая таблица генерирует с помощью rowspan и colspan с помощью javascript

Я пытаюсь создать таблицу пользователем, давая динамическое создание строк и столбцов со значениями rowspan и colspan ниже формата, на основе которых необходимо сгенерировать.

Пример ввода:

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: rowspan, 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">
';
    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>
';
         colspanFlag = false;
    }

    var tfooter = '</table>';

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

}

Ссылка jsfiddle

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