Tendo inicialmente uma tabela com apenas uma linha e um certo número de colunas. Eu quero perguntar se é possível dividir cada célula (td) em um determinado número de linhas, começando nesta coluna e continuando até a última coluna

Digamos que a tabela acima é minha tabela original e que na primeira coluna eu decido dividi-la em duas linhas, essa divisão também deve se aplicar a todas as colunas subsequentes

Como você pode ver, dividir a primeira coluna em 2 linhas também dividiu a seguinte coluna em 2 linhas.

Então, se eu escolher dividir a segunda coluna em 2 linhas, essa divisão só deve se aplicar às colunas que começam na segunda coluna. Não deve tocar na primeira coluna.

Agora, adicionarei mais duas imagens de exemplo apenas para ter certeza de que fiquei claro no que quero receber.

Agora que descrevi o que preciso alcançar usando imagens, quero perguntar se seria possível fazer isso. Em caso afirmativo, você acha que poderia dar algumas dicas sobre o que devo fazer ou onde devo começar?

Qualquer conselho ou orientação seria muito apreciado.

P.S. Sinta-se à vontade para editar o título da pergunta se achar que ela não se encaixa no que descrevi nela.

Editar:jsFiddle Adicionado

Talvez eu não tenha mencionado isso antes, mas sou muito novo no jQuery. No entanto, fazendo alguma pesquisa, eu consegui chegar a algocomo isso. Eu sei que o código é uma bagunça, mas pelo menos dá uma ideia melhor do que eu estou procurando. No jsfiddle estou colocando uma nova tabela dentro da coluna que quero dividir. Eu uso essa abordagem porque, para ser honesto, eu não tenho a menor idéia de como fazer isso de outra maneira. Talvez agora com este jsfiddle, você será capaz de dar algumsugestões sobre como melhorá-lo ou talvez um melhoridéia sobre como fazer isso.

Código HTML:

 Number of Levels(Columns):<input type="text" id="nCols"/>
    <input type="button" value="Create Table"  id="CreateTreeTable"  />
    <br />
    <br />
    <div id="box"></div>
    <br />

Código JS

$(function(){
    //------------------------------------------------
     $('#CreateTreeTable').click(function () {
        var rows = 1;
        var cols = parseInt($("#nCols").val())+1;
        var head = "head1";
        var table =  createTable("TreeTable",rows,cols,head);
        table.appendTo("#box"); 
     });



    $('#box').on('click', '#TreeTable .level', function() {     
        if(this.id=='level1')
        {
            var head = $("#head1")
            var mytable =$("#TreeTable")
            var idRow= "row";
            mytable.html("");
            head.appendTo(mytable); 
            var cols = parseInt($("#nCols").val())+1;
            var nTimes= prompt("# Level 1: NUMBER OF ROWS: ","2")           
            for (var i = 0; i < nTimes; i++) {
                var row = $('<tr id='+idRow+"-"+ (i+1)+'></tr>').appendTo(mytable);
                for (var j = 0; j < cols; j++) {                
                    $('<td id='+idRow+"-"+ (i+1)+":"+(j+1)+'></td>').append("").appendTo(row); 
                }
            }
            $('#TreeTable >tbody >tr').each(function(index,item) {  
                if (index != 0)
                {
                var cell=  $(this).children("td").eq(0);
                cell.html('Level 1 : Value');           
                }
            });         
        }
        else
        {
            var nTimes= prompt("# Level "+this.id +": NUMBER OF ROWS: ","2")
            $('#TreeTable >tbody >tr').each(function(index,item) {              
                if (index!=0)
                {
                    var cell=  $(this).children("td").eq(1);
                    cell.html('');                  
                    var temptable= createTableSimple("tb",nTimes,1,"head2")
                    temptable.appendTo(cell);   
                }
            });
        }
    });

    //------------------------------------------------
});

function createTable(idtable,nrorows,nrocolumnas,head){  
    mytable = $('<table  border="1" cellspacing="0" cellpadding="0" ></table>').attr({ id: idtable });
    var rows = nrorows;
    var cols = nrocolumnas;
    $("#box").html("");
    //----------
        var row = $('<tr id='+head+'></tr>').appendTo(mytable);
        for (var j = 0; j < cols; j++) {
            if (j==cols-1)
            {
                $('<td></td>').append("Returns").appendTo(row); 
            }
            else
            {$('<td></td>').append("level"+ (j+1)+
            "<input type='button' class='level' value='# Rows' id='level"+(j+1)+"'"+
            " />").appendTo(row); 
            }           
        }           
    //----------         
    return   mytable;
}

function createTableSimple(idtable,nrorows,nrocolumnas,head){    
    mytable = $('<table border=1 cellspacing="0" cellpadding="0" style="width:100%; " ></table>').attr({ id: idtable });
    var rows = nrorows;
    var cols = nrocolumnas;
    //----------
    for (var i = 0; i < rows; i++) {
        var row = $('<tr></tr>').appendTo(mytable);
        for (var j = 0; j < cols; j++) {
            $('<td></td>').append("value").appendTo(row);           
        }           
    }
    //----------         
    return   mytable;
}