javascript - 显示数据后不显示添加按钮

Question

ajax 成功后，数据显示在行中，但如果我当时想添加新行，则添加按钮不显示。

我的代码:

  <div class="row">
     <div class="col-12">
      <h3>Add Video Detail</h3>
       <form id="insertvideo" method="post">
       <table id="addrow" width="100%">
        <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add"/></td>
          <tr class="clonetr">
                <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
                <td>Video description<input type="text"  id="videodesc" name="videodesc[]" class="form-control"></td>
                <td>Video Links<input type="text"  id="videolink" name="videolink[]" class="form-control"></td>
                <td><input type="button" class="btn btn-danger deleteButton" value="delete"/></td>
          </tr>
       </table>
       </form>  
     </div>
   </div>
   <div class="col-sm-6" style="margin-top: 13px; margin-left: 400px;">
       <button type="submit" id="btn-update"   value="Submit" class="btn btn-primary col-3 offset-1">Save</button>
   </div>

  <script>
      $(function(){
        $(".addButton").click(function(){
            $('.clonetr:last').clone(true).appendTo("#addrow");
        });

        $(".deleteButton").click(function(){
            if($('.deleteButton').length > 1)

               $(this).closest("tr").remove();
            else
                alert('Atleast one required.');

        });
    });
   var mainCatId = $(this).val();
       $.ajax({
                url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail",
                type: "POST",
                data: {mainCatId:mainCatId},
                dataType:'html',
                success: function(response)
                {
                    $('#addrow').html(response);
                    console.log(response);
                }
             });

   </script>

我不知道我的代码哪里错了。 我想添加一个新行，但添加按钮显示以添加一个新行。

Answer 1

因为我不能运行你的 ajax，这只是一个关于如何修复它的猜测。

首先，通过添加缺失的 <tr> 来修复表:

<table id="addrow" width="100%">
  <tr>
    <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add" /></td>
  </tr>
  <tr class="clonetr">
    <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
    <td>Video description<input type="text" id="videodesc" name="videodesc[]" class="form-control"></td>
    <td>Video Links<input type="text" id="videolink" name="videolink[]" class="form-control"></td>
    <td><input type="button" class="btn btn-danger deleteButton" value="delete" /></td>
  </tr>
</table>

现在清除表格但保留添加按钮:

$('#addrow tr:not(:first)').remove();
$('#addrow').append(response);

所以现在它看起来像:

$.ajax({
    url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail",
    type: "POST",
    data: {mainCatId:mainCatId},
    dataType:'html',
    success: function(response)
    {
        $('#addrow tr:not(:first)').remove();
        $('#addrow').append(response);
        console.log(response);
    }
});

要清除新创建的行，尝试:

$(".addButton").click(function(){
    $('.clonetr:last').clone(true).appendTo("#addrow");
    $("#addrow tr:last input").val("");
});