Question

我正在尝试使用http://jqueryui.com/autocomplete/？在HTML表格单元格中。我通过单击按钮动态添加新行。但是自动完成仅适用于最初加载页面时创建的第一行。不会为所有新添加的行调用jquery自动完成功能。如何做到这一点？

带自动填充脚本的HTML表：

    <table id="dataTable" name="dataTable" border="1" WIDTH="50">
    <col width="40">
        <tr>
            <th>Prog Filter</th>
        </tr>
        <tbody>
            <tr>
                <td WIDTH="40">
                    <input type="text" name="ProgFilter" id="ProgFilter" style="display:table-cell; width:40px" />
                </td>
        </tbody>
</table>
<script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC", ];
        $("#ProgFilter").autocomplete({
            source: availableTags
        });
    });
</script>

添加行的Javascript：

     function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
var row=table.insertRow(rowCount);
var colCount=table.rows[1].cells.length;
for(var i=0;i<colCount;i++)
{
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type)
    {
    case"text":newcell.childNodes[0].value="";break;
    }
}
}

Answer 1

使用JS，根据TD的类调用每行的自动完成函数：

    function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
var row=table.insertRow(rowCount);
var colCount=table.rows[1].cells.length;
for(var i=0;i<colCount;i++)
{
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type)
    {
    case"text":newcell.childNodes[0].value="";break;
    case"checkbox":newcell.childNodes[0].checked=false;break;
    case"select-one":newcell.childNodes[0].selectedIndex=0;break;
    }
            $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme",
        ];
        $( ".FilerClass" ).autocomplete({
            source: availableTags
        });
    });
}

}

jquery自动完成功能不适用于新添加的表行 - ＆gt;单元格

1 个答案: