html - jQuery how to split table cell into a different number of rows from column to column

Question

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

Answer 1

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.