Posiadanie początkowo tabeli zawierającej tylko jeden wiersz i pewną liczbę kolumn. Chcę zapytać, czy można podzielić każdą komórkę (td) na określoną liczbę wierszy, zaczynając od tej kolumny i kontynuując aż do ostatniej kolumny

Powiedzmy, że powyższa tabela jest moją oryginalną tabelą i że w pierwszej kolumnie postanawiam podzielić ją na 2 wiersze, ten podział powinien również dotyczyć wszystkich kolejnych kolumn

Jak widać podział pierwszej kolumny na 2 wiersze podzielił następującą kolumnę na 2 wiersze.

Następnie, jeśli zdecyduję się podzielić drugą kolumnę na 2 wiersze, ten podział powinien mieć zastosowanie tylko do kolumn rozpoczynających się w drugiej kolumnie. Nie powinien dotykać pierwszej kolumny.

Teraz dodam jeszcze dwa przykładowe zdjęcia, aby upewnić się, że zrozumiałem, co chcę uzyskać.

Teraz, gdy opisałem, co muszę osiągnąć za pomocą obrazów, chcę zapytać, czy byłoby możliwe zrobienie czegoś takiego. Jeśli tak, czy uważasz, że mógłbyś podać kilka wskazówek, co powinienem zrobić lub gdzie zacząć?

Wszelkie porady lub wskazówki byłyby bardzo mile widziane.

P.S. Możesz edytować tytuł pytania, jeśli uważasz, że nie pasuje do tego, co w nim opisałem.

Edytować:jsFiddle Dodany

Może nie wspomniałem o tym wcześniej, ale jestem naprawdę nowy w jQuery. Jednak wykonując kilka prób udało mi się coś wymyślićlubię to. Wiem, że kod jest bałaganem, ale przynajmniej daje ci lepsze wyobrażenie o tym, czego szukam. W jsfiddle umieszczam nową tabelę w kolumnie, którą chcę podzielić. Używam tego podejścia, ponieważ szczerze mówiąc, nie mam najmniejszego pojęcia, jak to zrobić w inny sposób. Może teraz z tym jsfiddle będziesz mógł dać trochępropozycje jak to poprawić, a może lepiejpomysł jak to zrobić.

Kod 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 />

Kod 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;
}