Question

我对此脚本有疑问。当我点击添加行时，它没问题，但第二次，它确实无法正常工作。删除行也不起作用。

有什么想法吗？最新的jquery boostrap 4 alpha 6

＆＃13;

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

＆＃13;

Answer 1

您的代码适用于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();
        }
    });
});

动态行javascript添加/删除

1 个答案: