How to retain the dropdown selection after adding new rows or columns to a table

Question

I have a project requirement where I need to create a dynamic table using jQuery. I have reached a state where I am able to add dynamic columns or rows to a table. You can have a look at the fiddle code here .

HTML:

<div id='input_div' name='input_div'>
Please Input your Matrix Dimensions : <input type="text" id="rowcount" size="2" value="2"> 
<span>X <input type="text" id="columncount" size ="2" value="2">
</div> <br><br>
<input type="button" id="tablebtn" value="Create Table">
<input type="button" id="newabilitybtn" value="Add Ability">
<input type="button" id="newlevelbtn" value="Add Level">
<input type="button" id="submit" value="submit">
<input type="button" class="addButton" value="Add" />
<br><br>
<div id="box">
</div>

jQuery Code:

var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'},
  {val : 4, text: 'Four'}
];
$("#newabilitybtn").hide();
$("#newlevelbtn").hide();
$("#submit").hide();

$("#tablebtn").click(function(){     
    mytable = $('<table></table>').attr({ id: "MatrixTable" });
    var rows = new Number($("#rowcount").val());
    var cols = new Number($("#columncount").val());
    var tr = [];

    for (var i = 0; i < rows; i++) {
        var row = $('<tr>').attr({ class: ["class1", "class2"].join(' ') }).appendTo(mytable);
        for (var j = 0; j < cols; j++) {
            var td = $('<td>').appendTo(row);
            var sel = $('<select>').attr({ class: ["matrix"]  }).appendTo(td);
            $(arr).each(function() {
                sel.append($("<option>").attr('value',this.val).text(this.text));
            });   
            $('</td>').appendTo(row);
        }   
        $('</tr>').appendTo(row);
    }
    console.log("TTTTT:"+mytable.html());
    mytable.appendTo("#box");   
    $("#tablebtn").hide(); $("#input_div").hide();
    $("#newabilitybtn").show();
    $("#newlevelbtn").show();
    $("#submit").show();
});

$("#newabilitybtn").click(function(){    
    var rows = $('#MatrixTable tr').length;
    var cols = $('#MatrixTable').find("tr:first td").length;
    var tr = []; 
    $('#MatrixTable').remove();
    mytable = $('<table></table>').attr({ id: "MatrixTable" });
    for (var i = 0; i < rows+1; i++) {
        var row = $('<tr>').attr({ class: ["class1", "class2"].join(' ') }).appendTo(mytable);

        for (var j = 0; j < cols; j++) {
            var td = $('<td>').appendTo(row);
            var sel = $('<select>').attr({ class: ["matrix"]  }).appendTo(td); 
            $(arr).each(function() {
                sel.append($("<option>").attr('value',this.val).text(this.text));
            });   
            $('</td>').appendTo(row);
        }
         $('</tr>').appendTo(row);

    }
    console.log("TTTTT:"+mytable.html());
    mytable.appendTo("#box");   
});

$("#newlevelbtn").click(function(){  
    var rows = $('#MatrixTable tr').length;
    var cols = $('#MatrixTable').find("tr:first td").length;
    var tr = []; 
    var rows_1 = 0;
    $('#MatrixTable').remove();
    mytable = $('<table></table>').attr({ id: "MatrixTable" });
    for (var i = 0; i < rows; i++) {
        var row = $('<tr>').attr({ class: ["class1", "class2"].join(' ') }).appendTo(mytable);
        for (var j = 0; j < cols+1; j++) {
            var td = $('<td>').appendTo(row);
            var sel = $('<select>').attr({ class: ["matrix"]  }).appendTo(td);
            $(arr).each(function() {
                sel.append($("<option>").attr('value',this.val).text(this.text));
            });   
            $('</td>').appendTo(row);
        }   
        $('</tr>').appendTo(row); 
    }
    console.log("TTTTT:"+mytable.html());
    mytable.appendTo("#box");   
});

CSS COde:

table{
    width:200px;
    height:200px;
}
table td{
    padding:10px;
    margin:10px;
    border:1px solid #ccc;
}
table tr{
    height:10px;
}

Now, the problem is that in my approach I am clearing the table div and re-creating the table with the new dimensions. In this case I am losing the previous table data. How can I save the temporary data and reload it when creating the new table? Once all the data is selected, I need to save the selection to the DB using an AJAX call.

Another question is: I have learnt about the clone function. Can clone be used on a column also?

Answer 1

Instead of replacing the enitre table , add rows and columns to the existing one: https://jsfiddle.net/ilpo/rwacv5mn/3/

$("#newabilitybtn").click(function(){
    $('#MatrixTable').append($('#MatrixTable').find("tr:last").clone());
});

$("#newlevelbtn").click(function(){  
    $('#MatrixTable tr').append($("#MatrixTable tr td:last").clone());
});