Автозаполнение jQuery для динамически добавляемых строк (с использованием JavaScript) - PullRequest
Новая
       4

Автозаполнение jQuery для динамически добавляемых строк (с использованием JavaScript)

0 голосов
/ 11 июня 2011

Ниже приведен код, который я использую для динамического создания строк на странице 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",{
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
}); 
});

Вот функция добавления кнопки строки и таблицы, в которой мы ассоциируем автозаполнение с идентификатором, 

<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 Цена единицы

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>

Автозаполнение работает только для первого ввода, который отображается по умолчанию. Это не работает вообще для дополнительных строк, которые добавляются с помощью функции addrow. Как видите, мы связали id = "3" для поля ввода с именем par []. Мы считаем, что проблема может быть там. Любая помощь очень ценится. Спасибо!

1 Ответ

0 голосов
/ 05 июля 2011

решение простое, замените идентификатор класса, а затем вставьте этот класс вместо :input в код вашего адреса, например: 

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

Надеюсь, это поможет вам.

...