jQuery 在動態添加的行上自動完成（使用 Javascript）

Question

下面是我用來在 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 & autocomplete 功能的片段，

<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",{
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
}); 
});

這是 function 用於添加行按鈕和我們將自動完成與 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>

詳情 數量 UOM 單價

稅

<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 function 添加的其他行，它根本不起作用。 如您所見，我們為名稱為 par[] 的輸入框關聯了 id="3"。 我們相信問題可能就在那里。 非常感謝任何幫助。 謝謝 ！

Answer 1

解決方案很簡單，將 id 替換為 class ，然后將這個 class 而不是:input放入您的 addrow 代碼中，例如：

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

我希望它可以幫助你。