CODEWITHSUNDEEP
javascriptjquery
Arul Kumar
Arul Kumar

Reputation: 71

Issue with Dynamically added rows in HTML Table

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>

Upvotes: 2

Views: 538

Answers (1)

thecodeparadox
thecodeparadox

Reputation: 87073

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 inputs.

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

Upvotes: 3

Related Questions