Question

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

我想做什么： 我想在用户点击按钮时添加输入字段（简单！）。

问题：它只追加一次。

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++

http://jsfiddle.net/pUeue/1781/

Answer 2

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

Answer 3

稍微改变你的javascript工作：

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

变量i被定义为全局变量，而在您的方法中，您没有增加其值。那就是问题。

这是更新小提琴： http://jsfiddle.net/pUeue/1784/

Answer 4

每次i值为0且i + 1始终为1.将i=i+1;添加到您的代码中。

请查看以下代码

$('#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

我意识到已有4个答案，但我想展示我在评论中提到的创建易于维护的简单代码的提示。

此外，您的HTML连接实际上并不完全正确，但没有人可以告诉所有字符串操作。

使用现有的行计数（或最后一个id）等来确定要生成的下一个ID号。
考虑使用虚拟/模板元素而不是HTML字符串连接。这允许可维护的模板。
对外部字符串使用单引号，即HTML属性具有双引号（用于浏览器兼容性）。

此示例有前两个引号问题消失：

JSFiddle：http://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;
}

在此示例中，您的模板行位于虚拟脚本块中（未知类型，因此将被忽略）。它使用＆＃34;全球＆＃34;替换正则表达式中的选项以使用所需的值替换所有出现的占位符。

多次追加？

5 个答案:

JSFiddle：http://jsfiddle.net/pUeue/1787/