javascript - 追加多次？

Question

我知道这是一个基本问题，但我不知道该怎么办。我已经被困在这个问题上几个小时了，但我不知道出了什么问题。

我想做的事:我想在用户单击按钮时附加输入字段(简单!)。

问题:它只附加一次。

This is my fiddle

HTML 代码:

 <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 代码:

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

抱歉，我知道这是一个非常基本的问题，但我的 JavaScript 很弱。

Answer 1

您忘记增加变量i:

i++

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