动态添加行的jQuery自动完成（使用Javascript）

下面是我用来在HTML页面中动态创建行的代码。动态添加行的jQuery自动完成（使用Javascript）

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

税

<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函数添加的其他行，它完全不起作用。正如你所看到的，我们已经为名为par []的输入框关联了id =“3”。我们相信问题可能在那里。任何援助非常感谢。谢谢！

来源

2011-06-11 Prasanna

从不用大写写html标签。 – dynamic 2011-06-11 15:03:48

除非是xhtml，否则案例无关紧要。至于为什么自动完成不起作用，你是否将同一个id分配给第一行的附加行？ – kinakuta 2011-06-11 16:31:58

对于第一行，我在我的主html文件中给了一个id = 3。使用Javascript addrow函数创建的附加行没有ID。我们如何为Javascript addrow函数提供一个id，以便每行都有唯一的id或者我们如何为AddRow函数添加一个id，即不管添加的行数是多少，它们都具有相同的id。 – Prasanna 2011-06-13 04:23:52

的解决方案很容易，更换ID为一类，然后把这个类，而不是:input在addrow代码，如：

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

我希望它可以帮助你。

来源

2011-07-05 01:37:14

动态添加行的jQuery自动完成（使用Javascript）

回答

相关问题