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

Question

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

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

正如您所看到的，将第一列划分为2行也将以下列划分为2行。

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

现在，我将添加两个样本图片，以确保我明确了解我想要的内容。

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

非常感谢任何建议或指导。

P.S。如果您认为问题不符合我的描述，请随时编辑问题的标题。

编辑：jsFiddle已添加

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

HTML code：

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

Answer 1

根据我的评论，我仍然认为使用rowspan属性显示跨越多行的列是最佳选择。

例如，查看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>

看起来像这样：

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

那么，我们来谈谈分裂算法。要拆分列，您必须将之前在表中的行数加倍。我们从2 X 4开始，结果是4 x 4.拆分列之前的所有列都必须跨越两倍于之前的列。第0列最初的行数为1，但在拆分后它变为2。看看你的示例图像，如果我们要分割第2列，每个第1列单元格需要2的行数，每列0单元格需要4的行数。

我认为这种方法更好，因为您没有创建独立的表。如果每次拆分时都创建一个新的子表，最终会得到不保证排列的行，因为它们彼此完全无关。

---

Here's早期的原型。我正在研究算法中的一些错误。