jQuery如何将表单元格按列拆分为不同数量的行

最初只有一行和一定数量的列的表。 我想问您是否可以将每个单元格（td）拆分为给定数量的行，从这一列开始，一直拆分到最后一列

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

如您所见，将第一列划分为2行也将下一列划分为2行

然后，如果我选择将第二列拆分为两行，那么这种划分应该只适用于从第二列开始的列。它不应该碰到第一列

现在，我将再添加两个示例图像，以确保我清楚地了解了我想要得到的内容。

现在我已经描述了我需要使用图像来实现什么，我想问你是否有可能做到这一点。如果是的话，你认为你能给我一些提示，我应该做什么或者从哪里开始

如有任何建议或指导，将不胜感激

另外，如果你认为问题的标题不符合我在其中所描述的内容，请随意编辑

编辑：添加 也许我之前没有提到，但我对jQuery真的很陌生。然而，在做一些研究后，我发现了一些东西。我知道代码乱七八糟，但至少能让你更好地了解我在追求什么。在JSFIDLE中，我将在要拆分的列中放置一个新表。我使用这种方法是因为，老实说，我根本不知道如何用其他方法来做。 也许现在有了这个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,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;
}

$（函数（）{
//------------------------------------------------
$（'#CreateTreeTable'）。单击（函数（）{
var行=1；
var cols=parseInt（$（“#nCols”）.val（））+1；
var head=“head1”；
var table=createTable（“树表”、行、列、头）；
表.附录（“#方框”）；
});
$（'#box'）。在（'click'，'#TreeTable.level'，函数（）{
if（this.id=='level1'）
{
风险值头=$（“#头1”）
var mytable=$（“#树表”）
var idRow=“行”；
html（“”）；
头.附件（mytable）；
var cols=parseInt（$（“#nCols”）.val（））+1；
变量时间=提示（#级别1：行数：，“2”）
对于（变量i=0；itbody>tr'）。每个（函数（索引，项）{
如果（索引！=0）
{
var cell=$（this）.children（“td”）.eq（0）；
html（'level1:Value'）；
}
});         
}
其他的
{
var-nTimes=prompt（“#Level”+this.id+”：行数：“，“2”）
$（'#TreeTable>tbody>tr'）。每个（函数（索引，项）{
如果（索引！=0）
{
var cell=$（this）.children（“td”）.eq（1）；
cell.html（“”）；
var tentable=createTableSimple（“tb”，nTimes，1，“head2”）
可诱惑的。附属于（细胞）；
}
});
}
});
//------------------------------------------------
});
函数createTable（idtable，nRoRoRows，nrocolumnas，head）{
mytable=$（''）.attr（{id:idtable}）；
var行=nrows；
var cols=nrocolumnas；
$（“#框”）.html（“”）；
//----------
变量行=$（''）.appendTo（mytable）；
对于（var j=0；j

根据我的评论，我仍然认为使用

行span

属性来显示跨多行的列是最好的选择

例如，查看一个2 x 4的表格：

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

如果用户单击列1的拆分按钮，则列1、2和3都需要有新行，但列0将跨越当前行和新行。这将生成以下HTML：

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

那么，让我们来谈谈分裂算法。要拆分列，必须将表中以前的行数增加一倍。我们从一个2x4开始，最后是一个4x4。拆分柱之前的所有柱的跨度都必须是以前的两倍。列0最初的行跨度为1，但拆分后变为2。看看您的示例图像，如果我们要拆分第2列，则每个第1列单元格需要的行跨度为2，每个第0列单元格需要的行跨度为4

我认为这种方法更好，因为您没有创建独立的表。如果每次拆分时都创建一个新的子表，则最终会产生行

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