jQuery如何将表格单元拆分为不同列数的行 [英] jQuery how to split table cell into a different number of rows from column to column
问题描述
我想问你是否有可能将每个单元格（td）拆分成给定数量的行，从此列开始直到最后一列
比方说，上表是我的原始表格，第一张列我决定将它分成2行，这个部门也应该适用于所有后续列。
正如你看到的，将第一列分成2行也将下列列分成2行。
然后，如果我选择将第二列分成2行，则此分割只适用于从第二列开始的列。它不应该触及第一列。
现在，我将添加两个示例图片，以确保我清楚自己想要的内容。
现在我已经描述了使用图像需要实现的功能，我想问一下你是否可以做这样的事情。如果是这样，你认为你可以给我一些提示：我应该做什么或应该从哪里开始？
任何建议或指导将不胜感激。
>PS如果您认为它不符合我在其中描述的内容，请随意编辑问题的标题。
编辑： jsFiddle 新增了
也许我以前没有提过它，但是我对于jQuery来说真的很新鲜。但是，通过一些研究，我能够提出一些这样的。我知道代码是一团糟，但至少可以让你更好地了解我所追求的。在jsfiddle中，我将一个新表放入要分割的列中。我使用这种方法是因为，说实话，我没有任何其他方式如何做的最微不足道的想法。
也许现在有了这个jsfiddle，您可以提出一些关于如何改进它的建议，或者更好的想法 p>
HTML代码：
关卡数量（列）：< input type =textid =nCols/>
< input type =buttonvalue =Create Tableid =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 =提示符（＃1级：行数：，2）
for（var i = 0; i< nTimes; i ++）{
var row = $（'< tr id ='+ idRow + - +（i + 1）+'>< / tr>'）。appendTo（mytable）; （i = 1; j< cols; j ++）{
$（'< td id ='+ idRow + - +（i + 1）+：+ 1）+ '>< / TD>'。）附加（ ）appendTo（行）;
$ b $（'＃TreeTable> tbody> tr'）。each（function（index，item）{
if（index！= 0）
{
var cell = $（this）.children（td）。eq（0）;
cell.html（'Level 1：Value'）;
}
}）;
$
var nTimes = prompt（#Level+ this.id +：行数：，2）
$ （'#TreeTable> tbody> tr'）。each（function（index，item）{
if（index！= 0）
{
var cell = $（this）。儿童（td）。eq（1）;
cell.html（''）;
var temptable = createTableSimple（tb，nTimes，1，head2）
temptable .appendTo（cell）;
}
}）;
}
}）;
// ---------------------------------------- --------
}）;
$ b $函数createTable（idtable，nrorows，nrocolumnas，head）{
mytable = $（'< table border =1cellspacing =0cellpadding =0><<<< ; / table>'）。attr（{id：idtable}）;
var rows = nrorows;
var cols = nrocolumnas;
$（＃box）。html（）;
// ----------
var row = $（'< tr id ='+ head +'>< / tr>'）。appendTo（mytable）; （$ j $ col $ 1
$（'< td>< /td>').append(\"Returns\").appendTo(row）;
}
else
{$（'< td>< / td>'）。append（level+（j + 1）+
< input type ='button'class ='level'value ='＃行'id ='level+（j + 1）+'+
/>\").appendTo(row）;
}
}
// ----------
return mytable;
函数createTableSimple（idtable，nrorows，nrocolumnas，head）{
mytable = $（'< table border = 1 cellspacing =0cellpadding =0 style =width：100％;>< / table>'）。attr（{id：idtable}）;
var rows = nrorows;
var cols = nrocolumnas;
// ----------
for（var i = 0; i
。
}
}
// ----------
return mytable;
仍然认为使用 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填补了这一空白 - >
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td rowspan =2>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>来自前一行的
<！ - td填补了这一空白 - >
< 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个行跨度。
我认为这种方法更好，因为您不会创建独立的表。如果每次分割都创建一个新的子表，最终会得到不保证排列的行，因为它们彼此完全无关。
Having initially a table with just one row and a certain number of columns. I want to ask you if it is possible to split each cell(td) into a given number of rows, starting at this column and continuing until the last column
Let's say the above table is my original table and that in the first column I decide to split it into 2 rows, this division should also apply to all the subsequent columns
As you can see dividing the first column into 2 rows also divided the following column into 2 rows.
Then, if I choose to split the second column into 2 rows, this division should only apply to the columns starting at the second column. It shouldn't touch the first column.
Now, I will add two more sample images just to make sure I made myself clear in what I want to get.
Now that I have described what I need to achieve using images, I want to ask you if it would be possible to do such a thing. If so, do you think you could give some hints of what should I do or where should I start??
Any advise or guidance would be greatly appreciated.
P.S. Feel free to edit the title of the question if you think it doesn't fit what I have described in it.
Edit: jsFiddle Added
Maybe I didn't mention it earlier , but I'm really new to jQuery. However, doing some reseach, I was able to come up with something like this. I know the code is a mess, but at least gives you a better idea of what I'm after. In the jsfiddle I'm putting a new table inside the column I want to split. I use this approach because, to be honest , I dont have the faintest idea of how to do it any other way. Maybe now with this jsfiddle , you will be able to give some suggestions on how to improve it or maybe a better idea on how to do it.
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 code
$(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;
}
As per my comment, I still think that using the rowspan attribute to display the columns that span multiple rows is the best option.
For example, look at a 2 x 4 table:
0 1 2 3
+------+------+------+------+
| | | | |
+------+------+------+------+
| | | | |
+------+------+------+------+
If the user clicks the split button for column 1, columns 1, 2, and 3 all need to have a new row, but column 0 will span the current row and the new row. This results in the following 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>
which looks like this:
0 1 2 3
+------+------+------+------+
| | | | |
| +------+------+------|
| | | | |
+------+------+------+------+
| | | | |
| +------+------+------|
| | | | |
+------+------+------+------+
So, let's talk about the splitting algorithm. In order to split a column, you have to double the number of rows that were previously in the table. We started with a 2 X 4 and ended up with a 4 x 4. All of the columns before the split column have to span twice as many columns as they did before. Column 0 originally had a rowspan of 1, but it became 2 after the split. Looking at your example images, if we were to then split column 2, each column 1 cell would need a rowspan of 2, and each column 0 cell would need a rowspan of 4.
I think this approach is better because you aren't creating independent tables. If you create a new sub-table each time you split, you end up with rows that aren't guaranteed to line up because they are completely unrelated to each other.
Here's an early prototype. I'm working out some bugs in the algorithm.
这篇关于jQuery如何将表格单元拆分为不同列数的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
