动态行javascript添加/删除

Question

我有这个脚本的问题。当我点击添加行时，没关系，但是第二次，它不起作用。 另外删除行不起作用。

有什么想法？ 最新的jQuery 自举4阿尔法6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div class="adminformTitle"> 
 
     <table class="table table-sm table-hover" id="tab_logic"> 
 
     <thead> 
 
      <tr class="dataTableHeadingRow"> 
 
      <th class="text-md-center"> #</th> 
 
      <th class="text-md-center">User question</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr id="addr0"> 
 
      <td>1</td> 
 
      <td>' . HTML::inputField('user0', $user, 'placeholder="User question"') . '</td> 
 
      </tr> 
 
      <tr id="addr1"></tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 

 
    <div class="col-md-12"> 
 
     <a id="add_row" class="btn btn-primary pull-left">Add Row</a><a id="delete_row" class="pull-right btn btn-danger">Delete Row</a> 
 
    </div> 
 

 

 

 
<script> 
 
$(document).ready(function(){ 
 
    var i=1; 
 
    $("#add_row").click(function(){ 
 
     $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md' /></td>"); 
 
    
 
     $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
 
     i++; 
 
     }); 
 
    $("#delete_row").click(function(){ 
 
     if(i>1){ 
 
      $("#addr"+(i-1)).html(''); 
 
      i--; 
 
     } 
 
    }); 
 
}); 
 
</script>

Answer 1

您的代码支援Google Chrome V59和甚至 IE 11

但是，您不必创建一个空的<tr>用于追加<td>并使用计数器i来跟踪当前的<tr>号码。

刚刚离开默认<tr>在<tbody>：

<table class="table table-sm table-hover" id="tab_logic"> 
    <thead> 
     <tr class="dataTableHeadingRow"> 
     <th class="text-md-center"> #</th> 
     <th class="text-md-center">User question</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1</td> 
     <td>' . HTML::inputField('user0', $user, 'placeholder="User question"') . '</td> 
     </tr> 
    </tbody> 
    </table> 

的JavaScript：

$(document).ready(function(){ 
    var $tbody = $('#tab_logic tbody'); 
    $("#add_row").click(function(){ 
     var n = $tbody.find('tr').length; 

     var $tr = $('<tr>') 
      .append('<td>' + (n + 1) + '</td>') 
      .append('<td><input name="user' + n + '" type="text" placeholder="User" class="form- control input- md" />') 
      .appendTo($tbody); 
    }); 

    $("#delete_row").click(function(){ 
     if ($tbody.find('tr').length > 1) { 
      $tbody.find('tr:last').remove(); 
     } 
    }); 
});