javascript - 追加多次？

我知道这是一个基本问题，但我不知道该怎么办。几个小时以来，我一直在坚持这一点，但我不知道这有什么问题。


我想做的事：
我想在用户单击按钮时追加输入字段（简单！）。

问题：仅追加一次。

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很弱。

最佳答案

http://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++;
});

单击后，您不会增加i

关于javascript - 追加多次？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24828525/