使用jQuery自动完成动态添加行

我有一个单行（textfield）表和添加行按钮，当用户单击添加行时，它动态地创建另一个包含文本字段的行。此外，我应用autocomplete该文本field.Now自动完成功能正常工作的第一行，但是当我添加新的行它dosn't工作。下面是我的代码PLZ告诉我，我错了使用jQuery自动完成动态添加行

添加行功能

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

      } 

     }

jQuery的自动完成功能

$(function() { 
     var availableTags = [ 
      "Apple", 
      "Dell", 
      "Microsoft", 
      "Sony", 

     ]; 
     $("#product").autocomplete({ 
      source: availableTags 
     }); 
    });

添加行按钮和表文本字段

<input type="image" src="../images/add.png" onClick="addRow('dataTable')" /> 
<TABLE id="dataTable" width="350px" border="1"> 
<TR> 
    <TD> <INPUT type="text" name="product" id="product" /> </TD> 
</TR> 
</TABLE>

来源

2012-03-27 Arif

基本上，这里发生的事情是，您动态创建的新元素没有被jQuery自动完成函数拾取，因为它是在您调用该函数后创建的。所以你需要做的是每次添加行后（在函数addRow（）的末尾）调用jQuery自动完成函数。

来源

2012-03-27 06:08:17

是的，我有同样的想法，但当我尝试它也不工作，我不知道这是什么问题 – Arif 2012-03-27 06:12:30

快速浏览，发现你在应用自动完成时使用jQuery中的ID选择器，你应该请注意，id选择器只能选择具有相同id的所有元素中的第一个元素。您可以简单地从“$（”#product“）.autocomplete（{”改为“$（'input [name =”product“]'）。autocomplete（{”使其工作。 – 2012-03-27 06:39:30

waaaaaw其工作，谢谢你这么多**硕然**你解决了我非常重要的问题......上帝保佑你 – Arif 2012-03-27 06:49:09

使用jQuery自动完成动态添加行

回答

相关问题