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

问题描述

我有一个项目需求，我需要使用Jquery创建一个动态表。
我已经达到了可以将动态列或行添加到表的状态。
您可以在这里查看小提琴代码：

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 : DEMO LINK HERE

HTML代码在这里：

HTML CODE here:

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

Jquery Code here：

Jquery Code here:

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

CSS代码：

CSS COde:

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

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

Now, The problem is I need replace the Dropdown in each cell with a search input field. I searched around the net and found this link to be suitable. Autocomplete widget. I searched on how to implement this and found that if the DOM elements are created dynamically with the clone function then it will not work or Most of them have suggested to change the way in which my table is created. Can any one guide me to a tutorial or blog, which educates me on how to get this task done. My project is developed using Perl language.

我最初的方法是清除数组 arr 的内容，使用页面加载选项列表（Ajax调用）加载它。对每个单元格中的所有下拉列表重新使用该列表。这是正确的做法吗？

My initial approach was, to clear the contents of my array arr, load it with the list of options on page load ( Ajax call ). re-use that list for all the drop downs in each cell. Is this the right approach?

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

I am a newbie to jquery. Please guide me. Thanks

推荐答案

在创建新的代码后，只需运行 .autocomplete（）元素：

Just run the .autocomplete() function after creating new elements: https://jsfiddle.net/hmfpkdxh/5/

$('#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"]
});

这篇关于如何将jquery自动完成UI功能添加到我表格中的每个单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！