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

前端之家收集整理的这篇文章主要介绍了jQuery如何将表格单元格从列到列拆分成不同数量的行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最初只有一行和一定数量的列.
我想问你是否可以将每个单元格(td)拆分成给定的行数,从此列开始并一直持续到最后一列

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

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

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

现在,我将添加两个样本图像,以确保我明确了解我想要的内容.

既然我已经描述了使用图像需要实现的目标,我想问你是否可以做这样的事情.如果是这样,你认为你可以提供一些我应该做什么或在哪里开始的提示

任何建议或指导将不胜感激.

附:如果您认为问题不符合我的描述,请随时编辑问题的标题.

编辑:jsFiddle添加

也许我之前没有提到它,但我是jQuery的新手.然而,做了一些研究,我能够提出一些东西like this.我知道代码是一团糟,但至少让你更好地了解我所追求的东西.在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,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属性显示跨越多行的列是最佳选择.

例如,查看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早期的原型.我正在研究算法中的一些错误.

原文链接:https://www.f2er.com/jquery/181281.html

猜你在找的jQuery相关文章