Question

我有一个项目要求，我需要使用jQuery创建一个动态表。我已达到一种状态，我可以向表中添加动态列或行。您可以查看小提琴代码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 COde：

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

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

另一个问题是：我已经了解了克隆功能。克隆是否也可以在列上使用？

Answer 1

不是替换enitre 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());
});

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

1 个答案: