jQuery如何将表格单元格从列到列拆分为不同数量的行 [英] jQuery how to split table cell into a different number of rows from column to column

问题描述

最初的表格只有一行和一定数量的列.我想问你是否可以将每个单元格(td)分成给定数量的行，从这一列开始一直持续到最后一列

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

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

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

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

As you can see dividing the first column into 2 rows also divided the following column into 2 rows.

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

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.

也许我之前没有提到它，但我对 jQuery 真的很陌生.然而，做了一些研究，我能够想出一些像这样.我知道代码是一团糟，但至少让你更好地了解我的目标.在 jsfiddle 中，我在要拆分的列中放置了一个新表.我使用这种方法是因为，老实说，我对如何以其他方式做到这一点一无所知.也许现在有了这个 jsfiddle ，您将能够就如何改进它提供一些建议，或者关于如何去做的更好的想法.

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 代码:

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

推荐答案

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

As per my comment, I still think that using the rowspan attribute to display the columns that span multiple rows is the best option.

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

For example, look at a 2 x 4 table:

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

如果用户点击第 1 列的拆分按钮，第 1、2 和 3 列都需要有一个新行，但第 0 列将跨越当前行和新行.这将产生以下 HTML:

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>

看起来像这样:

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

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

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