Как разделить ячейку таблицы на разное количество строк от столбца к столбцу
Иметь изначально таблицу с одной строкой и определенным количеством столбцов. Я хочу спросить вас, возможно ли разбить каждую ячейку (td) на заданное количество строк, начиная с этого столбца и продолжая до последнего столбца
Позволять'скажем, приведенная выше таблица является моей исходной таблицей и что в первом столбце я решил разделить ее на 2 строки, это разделение должно также применяться ко всем последующим столбцам
Как видите, разделение первого столбца на 2 строки также разделило следующий столбец на 2 строки.
Затем, если я решу разделить второй столбец на 2 строки, это разделение должно применяться только к столбцам, начинающимся со второго столбца. Это не должноне трогай первый столбец.
Теперь я добавлю еще два примера изображений, чтобы убедиться, что я ясно дал понять, что хочу получить.
Теперь, когда я описал, чего мне нужно достичь с помощью изображений, я хочу спросить вас, можно ли сделать такую вещь. Если да, как вы думаете, вы могли бы дать некоторые подсказки о том, что я должен делать или с чего мне начать?
Любой совет или руководство будет принята с благодарностью.
Постскриптум Не стесняйтесь редактировать название вопроса, если считаете, что это не так.не соответствует тому, что я описал в нем.
Редактировать:jsFiddle добавленнойМожет быть, я нене упомянуть об этом раньше, но яЯ действительно новичок в JQuery. Однако, сделав некоторые исследования, я смог что-то придуматькак это, Я знаю, что код беспорядок, но, по крайней мере, дает вам лучшее представление о том, что ям после. В Jsfiddle I 'Я помещаю новую таблицу в столбец, который я хочу разделить. Я использую этот подход, потому что, если честно, у меня нет ни малейшего представления о том, как сделать это любым другим способом. Может быть, теперь с этим jsfiddle, вы сможете дать некоторыепредложения о том, как улучшить это или, может быть, лучшеидея о том, как это сделать.
HTML код:
Number of Levels(Columns):
<br>
<br>
<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 = $('').appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('').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 = $('').attr({ id: idtable });
var rows = nrorows;
var cols = nrocolumnas;
$("#box").html("");
//----------
var row = $('').appendTo(mytable);
for (var j = 0; j < cols; j++) {
if (j==cols-1)
{
$('').append("Returns").appendTo(row);
}
else
{$('').append("level"+ (j+1)+
"").appendTo(row);
}
}
//----------
return mytable;
}
function createTableSimple(idtable,nrorows,nrocolumnas,head){
mytable = $('').attr({ id: idtable });
var rows = nrorows;
var cols = nrocolumnas;
//----------
for (var i = 0; i < rows; i++) {
var row = $('').appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('').append("value").appendTo(row);
}
}
//----------
return mytable;
}