动态添加的行上的jQuery自动完成使用Javascript

如何解决动态添加的行上的jQuery自动完成使用Javascript

| 下面是我用来在HTML页面中动态创建行的代码。

 function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            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 deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkBox = row.cells[0].childNodes[0];
            if(null != chkBox && true == chkBox.checked) {
                if(rowCount <= 1) {
                    alert(\"Cannot delete all the rows.\");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }

        }
        }catch(e) {
            alert(e);
        }
    }

以下是HTML文档中的jQuery和addRow和自动完成功能的代码段，

<script type=\"text/javascript\" src=\"addBox.js\"></script>
<script type=\"text/javascript\" src=\"jquery-1.4.2.js\"></script>
<script type=\'text/javascript\' src=\"jquery.autocomplete.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"jquery.autocomplete.css\" />

<script type=\"text/javascript\">
$().ready(function() {
$(\"#1\").autocomplete(\"autocomplete.PHP\",{
width: 260,matchContains: true,//mustMatch: true,//minChars: 0,//multiple: true,//highlight: false,//multipleSeparator: \",\",selectFirst: false
}); 
});
</script>

<script type=\"text/javascript\">
$().ready(function() {
$(\"#3\").autocomplete(\"autocomplete1.PHP\",selectFirst: false
}); 
});

这是添加行按钮和表格的功能，我们在其中将自动完成功能与ID相关联，

<input type=\"text\" name=\"sub\" size=\"76\" /><br/><br/>
<INPUT type=\"button\" value=\"Add Row\" onclick=\"addRow(\'dataTable\')\" />

<INPUT type=\"button\" value=\"Delete Row\" onclick=\"deleteRow(\'dataTable\')\" />
<table border=\"1\" cellpadding=\"10\" id=\"data\">
<tr>

细节数量单位单价税

<table id=\"dataTable\">
<TR>
        <TD ><INPUT type=\"checkBox\" name=\"chk\"/></TD>
        <TD ><INPUT type=\"text\" name=\"par[]\"size=\"20\" id=\"3\" /></TD>
        <TD><INPUT type=\"text\" name=\"qua[]\" size=\"5\"/></TD>
    <TD><INPUT type=\"text\" name=\"uom[]\" size=\"5\"/></TD>
    <TD><INPUT type=\"text\" name=\"un[]\" size=\"5\"/></TD>

自动完成功能仅适用于默认情况下显示的第一个输入。对于使用addrow函数添加的其他行，它根本不起作用。如您所见，我们已经为名称为par []的输入框关联了id = \“ 3 \”。我们认为问题可能在那里。非常感谢您的协助。谢谢！

解决方法

解决方案很简单，替换一个类的id，然后在您的addrow代码中将此类而不是4代替，例如：

$(function(){
    $(\'.autocomplete\').autocomplete({source: \'autocomplete.php\'});
});

希望对您有帮助。