jQuery如何将表格单元格从列到列拆分成不同数量的行

最初只有一行和一定数量的列.
我想问你是否可以将每个单元格(td)拆分成给定的行数,从此列开始并一直持续到最后一列

假设上面的表是我的原始表,并且在第一列中我决​​定将其拆分为2行,此划分也应该适用于所有后续列

如您所见,将第一列划分为2行也将以下列划分为2行.

然后,如果我选择将第二列拆分为2行,则此除法应仅适用于从第二列开始的列.它不应该触及第一列.

现在,我将添加两个样本图像,以确保我明确了解我想要的内容.

既然我已经描述了使用图像需要实现的目标,我想问你是否可以做这样的事情.如果是这样,你认为你可以提供一些我应该做什么或在哪里开始的提示？

任何建议或指导将不胜感激.

附：如果您认为问题不符合我的描述,请随时编辑问题的标题.

编辑：jsFiddle已添加

也许我之前没有提到它,但我是jQuery的新手.然而,做了一些研究,我能够提出一些东西like this.我知道代码是一团糟,但至少让你更好地了解我所追求的东西.在jsfiddle中我将一个新表放在我要分割的列中.我使用这种方法是因为,老实说,我不知道如何以任何其他方式做到这一点.
也许现在有了这个jsfiddle,你将能够就如何改进它提出一些建议,或者可能更好地了解如何做到这一点.

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

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

0      1      2      3
+------+------+------+------+
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
+------+------+------+------+

<table>
  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <!-- td from prevIoUs row fills this gap -->
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr> 
  <tr>
    <!-- td from prevIoUs row fills this gap -->
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

0      1      2      3
+------+------+------+------+
|      |      |      |      |
|      +------+------+------|
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
|      +------+------+------|
|      |      |      |      |
+------+------+------+------+