Javascript 如何将jquery自动完成UI功能添加到表中的每个单元格

我有一个项目需求，需要使用Jquery创建一个动态表。 我已达到可以向表中添加动态列或行的状态。 您可以在此处查看fiddle代码：

此处的HTML代码：

<br /><br />
<div id='input_div' name='input_div'>
Please Input your Matrix Dimensions : <input type="text" id="rowcount" size="2" value="1"> 
<span>X <input type="text" id="columncount" size ="2" value="1">
</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">
<br><br>
<div id="box">
</div>  

现在，问题是我需要用搜索输入字段替换每个单元格中的下拉列表。我在网上搜索了一下，发现这个链接很合适。我搜索了如何实现这一点，发现如果使用clone函数动态创建DOM元素，那么它将不起作用，或者大多数元素都建议更改创建表的方式。谁能给我一个教程或博客，教我如何完成这项任务。我的项目是用Perl语言开发的

我最初的方法是，为了清除数组

arr

的内容，使用页面加载（Ajax调用）上的选项列表加载它。对每个单元格中的所有下拉列表重复使用该列表。这是正确的方法吗

---

我是jquery的新手。请引导我。谢谢

创建新元素后，只需运行

.autocomplete（）

函数即可：

---

其中一个参考链接，我发现感谢的解决方案。但我想在源数组中进行更改。如何将autocomplete中的源选项更改为如下结构。我有一个mysql表，需要从中获取和填充搜索所需的数据。我有一个ajax调用来检索这些数据@ajax_data={'name'=>'P1'，'id'=>'2'}，{'name'=>'P2'，'id'=>'3'}，{'name'=>'P3'，'id'=>'9'}。在选择产品时，我必须将id保存到DB。我计划在每个单元格中都有一个隐藏变量来存储ID。在提交页面上，我将把它发送给Perl代码并存储在DB中。@llpo Oksanen:你能解释一下在这一步中我们到底在做什么吗

$（'#MatrixTable tr:last td input'）.val（“”）和$（this）.find（“>*：last input”）.val（“”）

。这是否会清除克隆tr/td中的选择？我已经进一步开发了这段代码，现在克隆的细胞获得了以前的td或tr的属性。你能在这方面指导我吗。。请@llpo Oksanen：我在stackoverflow中找到了解决我问题的方法。我试图在我的例子中加入同样的内容。@llpo-Oksanen：我还有一个关于自动完成的问题。Autocomplete是否支持在页面刷新时保留值？我将所有单元格的选定数据保存到数据库中。现在，如果用户返回保存的矩阵，则应显示其保存时的相应单元格值。我该怎么做？

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;
        if( i == 0){
            row=$('<tr><th></th><th>Level</th></tr>').attr({ class: ["Lheader"] }).appendTo(mytable);
        }
        row = $('<tr><th>Ability</th>').attr({ class: ["Aheader"] }).appendTo(mytable);

        for (var j = 0; j < cols; j++) {
            var td;
            td = $('<td>').attr({ class: ["matrix_row"] }).appendTo(row);
            var sel = $('<select />').attr({ class: ["matrix"], text:'Elway',id: "MatrixTable"+"_"+i+"_"+j  }).appendTo(td);
            $(arr).each(function() {
                sel.append($("<option>").attr('value',this.val).text(this.text));
            });  
            $('<br><br><span>').attr({'class':'rubric_span' }).html('Selected: ').appendTo(td);
            // $('#rubric_name').html(span);
            $('</span>').appendTo(row);
            $('</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(){
    $('#MatrixTable').append($('#MatrixTable').find("tr:last").clone());
});


$("#newlevelbtn").click(function(){
    $('#MatrixTable tr').each(function(){
        $(this).append($(this).find(">*:last").clone());
    });
});

$("#submit").click(function(){

    jsonObj = [];
    var dropdown_count = 0;
    var rowCount = $('#MatrixTable tr').length;
    var ColCount = $('#MatrixTable').find("tr:last td").length;
    var row = 1;
    var col = 1;

    // Fetching the Level and Ability Names
    //$("select[class=LHeader]").each(function() {

    //    var id = "Level_"+ row + "_" + col++  ;
    //    var selected_val = 0 ;//$(this).text();
    //    item = {}
    //    item ["id"] = id;
    //    item ["names"] = selected_val;
    //    jsonObj.push(item);
    //}); 

    //row = 1;
    //col = 1;    

    // Fetching the rubric Selections
    $("span[class=rubric_span]").each(function() {

        var id = "selected_rubric_"+ row + "_" + col++  ;
        //var selected_val = $(this).val();
        var selected_val = $(this).text();
        item = {}
        item ["id"] = id;
        item ["selected_rubric"] = selected_val;
        if( row == rowCount ){
            row = 1;
        }   
        if( col == ColCount + 1 ){
            col = 1;
            row++;
        }
        jsonObj.push(item);
    });
    console.log(jsonObj);    
});

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

$('#MatrixTable tr').each(function () {
    $(this).append($(this).find(">*:last").clone());
    $(this).find(">*:last input").val("").autocomplete({
        source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
    });
});

$('#MatrixTable').append($('#MatrixTable').find("tr:last").clone());
$('#MatrixTable tr:last td input').val("").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});