最初有一个只有一行和一定数量列的表。我想问你是否可以将每个单元格（td）拆分为给定数量的行，从这一列开始一直持续到最后一列
假设上表是我的原始表，并且在第一列中我决定将其拆分为 2 行，这种划分也应该适用于所有后续列
如您所见，将第一列分为 2 行也将以下列分为 2 行。
然后，如果我选择将第二列拆分为 2 行，则此划分应仅适用于从第二列开始的列。它不应该触及第一列。
现在，我将添加另外两个示例图像，以确保我清楚自己想要得到什么。
既然我已经描述了我需要使用图像来实现什么，我想问你是否可以做这样的事情。如果是这样，你认为你可以给出一些我应该做什么或我应该从哪里开始的提示吗？
任何建议或指导将不胜感激。
PS如果您认为它不符合我在其中描述的内容，请随意编辑问题的标题。
编辑：添加了 jsFiddle
也许我之前没有提到它，但我对 jQuery 真的很陌生。然而，做一些研究，我能够想出这样的东西。我知道代码是一团糟，但至少让您更好地了解我所追求的。在 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,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;
}