多次追加？

Question

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.

Answer 1

You forgot to increment variable i :

i++

https://jsfiddle.net/pUeue/1781/

Answer 2

https://jsfiddle.net/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

Answer 3

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.net/pUeue/1784/

Answer 4

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;                           
});

Answer 5

I realise there are already 4 answers, but I would like to demonstrate the tips I mentioned in comment 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 compatibility).

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

JSFiddle: https://jsfiddle.net/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).