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

Below is the code I am using to dynamically create rows in HTML page.

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

Below is the snippet from the HTML document calling the jQuery & addRow & autocomplete functionality,

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

Here is the function for adding the row button & the table where we're associating the autocomplete with an 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>

Particulars Quantity UOM Unit Price

Tax

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

The auto-complete works only for the first input which is displayed by default. It doesn't work at all for additional row(s) which are added using the addrow function. As you can see we've associated id="3" for the input box having name par[]. We believe the problem could be there. Any assistance is much appreciated. Thanks !

dongshushi5579
dongshushi5579 我们已经通过在addRowJavascript函数的for循环中使用以下代码在一定程度上解决了这个问题。$()。ready(function(){$(“:input”)。autocomplete(“autocomplete1.php”,{width:260,matchContains:true,selectFirst:false});});但这样可以为所有输入框自动完成。我只需要自动完成工作第二列,其属性名称为“par[]”`
大约 9 年之前 回复
dongxuying7583
dongxuying7583 对于第一行,我在主html文件中给出了id=3。使用Javascriptaddrow函数创建的其他行没有id。我们如何为Javascriptaddrow函数提供一个id,以便每一行都有唯一的id或者如何为AddRow函数设置一个id,即无论添加的行数是多少,它们都具有相同的id。
大约 9 年之前 回复
douyin2435
douyin2435 除非是xhtml,否则大小写无关紧要。至于为什么自动完成功能不起作用,您是否将相同的ID分配给第一行的其他行?
大约 9 年之前 回复
doulu1867
doulu1867 永远不要用大写写html标签。
大约 9 年之前 回复

1个回答



解决方案很简单,替换类的id,然后将此类替换为:input </ code> in 您的addrow代码,例如:</ p>

  $(function(){
$('。autocomplete')。autocomplete({source:'autocomplete.php'}); \ n});
</ code> </ pre>

我希望它可以帮到你。</ p>
</ div>

展开原文

原文

the solution is easy, replace the id for a class and then put this class instead of :input in your addrow code, like:

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

i hope it helps you.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问