I know this a basic question but I don't know what to do. I have been stuck on this from hours but I don't know what is wrong with it.

what I want to do: I want to append input field when user click on button(simple!).

Problem: It only append one time only.

This is my fiddle

Html code:

 <table class="table table-bordered" id="tab_logic">
   <thead>
     <tr>
       <th class="text-center">#</th>
       <th class="text-center">Name</th>
       <th class="text-center">Quantity</th>
     </tr>
   </thead>
   <tbody>
     <tr id='addr0'></tr>
   </tbody>
  </table>
  <button id='add' class="btn btn-outline btn-default">Add</button>

Jquery code:

var i=0;
    $('#add').click( function() {
      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      $('#addr'+(i+1)).html("<td>"+ (i+1) +"</td>"+
      "<td><input type='text' class='form-control input-md' /></td>"+
      "<td><input type='text'  class='form-control input-md'></td>"+
      "<td><a class='btn btn-default glyphicon glyphicon-remove' onclick='deleterow(this)' class'delete'></a></td>" 
      );  
    });
    
      function deleterow(obj){
        $(obj).parent().parent().remove();
        return false;
      }

Sorry I know Its very basic question but my JavaScript is weak.

I know this a basic question but I don't know what to do. I have been stuck on this from hours but I don't know what is wrong with it.

what I want to do: I want to append input field when user click on button(simple!).

Problem: It only append one time only.

This is my fiddle

Html code:

 <table class="table table-bordered" id="tab_logic">
   <thead>
     <tr>
       <th class="text-center">#</th>
       <th class="text-center">Name</th>
       <th class="text-center">Quantity</th>
     </tr>
   </thead>
   <tbody>
     <tr id='addr0'></tr>
   </tbody>
  </table>
  <button id='add' class="btn btn-outline btn-default">Add</button>

Jquery code:

var i=0;
    $('#add').click( function() {
      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      $('#addr'+(i+1)).html("<td>"+ (i+1) +"</td>"+
      "<td><input type='text' class='form-control input-md' /></td>"+
      "<td><input type='text'  class='form-control input-md'></td>"+
      "<td><a class='btn btn-default glyphicon glyphicon-remove' onclick='deleterow(this)' class'delete'></a></td>" 
      );  
    });
    
      function deleterow(obj){
        $(obj).parent().parent().remove();
        return false;
      }

Sorry I know Its very basic question but my JavaScript is weak.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 7, 2021 at 6:19 Syscall 19.8k1010 gold badges4343 silver badges5858 bronze badges asked Jul 18, 2014 at 15:21 xitasxitas 1,16433 gold badges2323 silver badges4949 bronze badges 2

• You dont count i up – Matteo B. Commented Jul 18, 2014 at 15:24
• 1 A few tips: Use the existing row count (or last id) etc to determine the next id number to generate. Also use single quotes for the outer strings, that that the HTML attributes have double-quotes (for browser patibility). Also consider using a dummy/template element instead of HTML string concatenation! – iCollect.it Ltd Commented Jul 18, 2014 at 15:27

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You forgot to increment variable i:

i++

https://jsfiddle/pUeue/1781/

https://jsfiddle/pUeue/1777/

var i=0;
    $('#add').click( function() {
      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      $('#addr'+(i+1)).html("<td>"+ (i+1) +"</td>"+
      "<td><input type='text' class='form-control input-md' /></td>"+
      "<td><input type='text'  class='form-control input-md'></td>"+
      "<td><a class='btn btn-default glyphicon glyphicon-remove' onclick='deleterow(this)' class'delete'></a></td>");  
      i++;
});

You don't increment i after you click

everytime i value is 0 and i+1 is always 1. add i=i+1; to your code.

Please find below code

$('#add').click( function() {debugger;
  $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
  $('#addr'+(i+1)).html("<td>"+ (i+1) +"</td>"+
  "<td><input type='text' class='form-control input-md' /></td>"+
  "<td><input type='text'  class='form-control input-md'></td>"+
  "<td><a class='btn btn-default glyphicon glyphicon-remove' onclick='deleterow(this)' class'delete'></a></td>" 
  );
  i=i+1;                           
});

Change your javascript a little bit to work:

var i=0;
    $('#add').click( function() {
      i += 1;
      $('#tab_logic').append('<tr id="addr'+(i)+'"></tr>');
      $('#addr'+(i)).html("<td>"+ (i) +"</td>"+
      "<td><input type='text' class='form-control input-md' /></td>"+
      "<td><input type='text'  class='form-control input-md'></td>"+
      "<td><a class='btn btn-default glyphicon glyphicon-remove' onclick='deleterow(this)' class'delete'></a></td>" 
      );  
    });

      function deleterow(obj){
        $(obj).parent().parent().remove();
        return false;
      }

variable i is defined as global variable, while in your method, you are not increasing its value. That was the issue.

Here is the update fiddle: https://jsfiddle/pUeue/1784/

I realise there are already 4 answers, but I would like to demonstrate the tips I mentioned in ment for creating simple code that is easier to maintain.

Also your HTML concatenation is actually not quite right, but nobody can tell with all the string operations.

• Use the existing row count (or last id) etc to determine the next id number to generate.
• Consider using a dummy/template element instead of HTML string concatenation. This allows for maintainable templates.
• Use single quotes for the outer strings, that that the HTML attributes have double-quotes (for browser patibility).

This example has the first two as the quotes issue goes away:

JSFiddle: https://jsfiddle/pUeue/1787/

$('#add').click(function () {
    var count = $('#tab_logic tr').length;
    $('#tab_logic').append($('#template').html().replace(/{i}/g, count));
});

function deleterow(obj) {
    $(obj).parent().parent().remove();
    return false;
}

In this example your template row sits in a dummy script block (of unknown type so is ignored). It uses a "global" replace option in a regex to replace all occurrences of a placeholder with the desired value(s).