javascript - 如何在向表中添加新行或列后保留下拉选择

Question

我有一个项目需求，我需要使用 jQuery 创建一个动态表。我已经达到了可以向表中添加动态列或行的状态。你可以看看 fiddle 代码 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 代码:

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

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

现在的问题是，在我的方法中，我正在清除表格 div 并使用新维度重新创建表格。在这种情况下，我丢失了以前的表数据。创建新表时如何保存临时数据并重新加载？选择所有数据后，我需要使用 AJAX 调用将选择保存到数据库。

另一个问题是:我已经了解了克隆功能。克隆也可以用于列吗？

Answer 1

不是替换整个 table，而是将 rows 和 columns 添加到现有的: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());
});