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

3

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

edited Jun 15, 2012 at 8:19

answered Jun 15, 2012 at 8:00

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arul Kumar Over a year ago

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?

thecodeparadox Over a year ago

@ArulKumar can you make a fiddle please

Arul Kumar Over a year ago

Thanks man now its working, i have slight re-ordered the coding to make the autocomplete.

thecodeparadox Over a year ago

@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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

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