Issue with Dynamically added rows in HTML Table

Question

Im trying to add rows dyanmically to HTML table. Html table have a autocomplete textbox. When the page is loaded autocomplete is working fine and I capture INSERT key to insert a new row. And its working fine too. Rows are added without any problem.

The problem i face is, autocomplete is ONLY WORKING in the first row and not in the row added dynamically, keydown event is also not working in the newly added row.

I think the problem is with id/name in the textbox. Your help is much appreciated.

My Script

 <script> $(function() { var availableTags = new Array(); <?php if($g_sql) { $i = 0; while ($result = mysql_fetch_array($g_sql)) { ?> availableTags[<?php echo $i;?>] = "<?php echo $result['GroupName'];?>"; <?php $i++; } } ?> $( "#txtmatg" ).autocomplete({ source: availableTags }); }); $("#txtsn").keydown(function(e) { if(e.which == 45) { addRow('mattable'); } }); </script> <SCRIPT language="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; switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; } } } </SCRIPT>

My HTML code is

 <div class="ui-widget"> <table id="mattable"> <tr> <td><input type="text" name="txtmatg[]" id="txtmatg" class="input"></td> <td><input type="text" name="txtmat[]" id="txtmat" class="input"></td> <td><input type="text" name="txtsn[]" id="txtsn" class="input"></td> </tr> </table> </div>

thecodeparadox · Accepted Answer · 2012-06-15 08:19:47Z

As you're appending input dynamically so you need delegate event handler (aka live event). So you should try like follwing:

$('#mattable').on("keydown.autocomplete","#txtmatg", function() { source: availableTags });

and should also use delegate for #txtsn like following:

 $('#mattable').on("keyup","#txtsn", function(e) { if(e.which == 45) { addRow('mattable'); } });

Note: you should not use same `id` for all `input`s.

Instead of #txtmatg you can use name property as selector definition like following:

$('#mattable').on("keydown.autocomplete","[name^=txtmatg]", function() { source: availableTags });

and for #txtsn use name like following:

 $('#mattable').on("keyup","[name^=txtsn]", function(e) { if(e.which == 45) { addRow('mattable'); } });

Here, [name^=tstmatg] will target to all inputs, name start with tstmatg and so on.

Read more about jQuery start selector

Thanks for you answer, I have altered as per you said, but autocomplete is not working in any row (new or the existing one) But the keyup is working fine on #txtsn in all the rows. Any thing i need to do?
Thanks man now its working, i have slight re-ordered the coding to make the autocomplete.
@ArulKumar hah, at last. feeling happy. don't forget to accept

Collectives™ on Stack Overflow

Issue with Dynamically added rows in HTML Table

1 Answer 1

Note: you should not use same `id` for all `input`s.

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Note: you should not use same id for all inputs.

4 Comments

Related

Note: you should not use same `id` for all `input`s.