Блог

Главная - Вопросы по программированию - Автозаполнение jQuery для динамически добавляемых строк (с использованием Javascript)

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

#php #javascript #mysql #html #jquery-autocomplete

#php #javascript #mysql #HTML #jquery-автозаполнение

Вопрос:

Ниже приведен код, который я использую для динамического создания строк на 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 amp;amp; true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }

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

Ниже приведен фрагмент из HTML-документа, вызывающий функциональность jQuery amp; addRow amp; 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
}); 
});

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

 <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. Как вы можете видеть, мы связали id =»3″ для поля ввода с именем par[]. Мы считаем, что проблема может быть там. Любая помощь высоко ценится. Спасибо!

Комментарии:

1. никогда не пишите html-тег с прописными буквами.

2. Регистр не имеет значения, если это не xhtml. Что касается причины, по которой автозаполнение не работает, присваиваете ли вы дополнительным строкам тот же идентификатор, что и первой строке?

3. Для первой строки я присвоил id = 3 в моем основном HTML-файле. Дополнительные строки, которые создаются с помощью функции addrow Javascript, не имеют идентификатора. Как мы можем предоставить идентификатор для функции addrow Javascript, чтобы каждая строка имела уникальный идентификатор, или как мы можем получить единый идентификатор для функции addRow, т. е. независимо от количества добавленных строк, все они имеют одинаковый идентификатор.

4. Мы решили эту проблему в определенной степени, используя следующий код внутри цикла for функции addRow Javascript. $().ready(function() { $(":input").autocomplete("autocomplete1.php",{ width: 260, matchContains: true, selectFirst: false }); }); Но это включает автозаполнение для всех полей ввода. Мне просто нужно автозаполнение для работы со вторым столбцом, который имеет имя атрибута «par[]»`

Ответ №1:

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

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

я надеюсь, что это поможет вам.