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成功函数中，添加了这样的代码。

 $('#addrow').html(response);

html()函数将替换addrow元素内的所有内容。因此添加按钮将替换为您的响应数据。请使用单独部分中的添加按钮或添加新容器以附加响应数据。

Answer 2

由于我无法运行您的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("");
});

Answer 3

// addd for Vendor Origin in admin zone
 $(".addorigin").on("click", function (e){
    $('.origintable tr:last').before('<tr class="origindiv">                            <td >   <input type="text"  /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Sender Number."></i></td><td ><input type="text"  /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Enter sender name."></i></td> <td><div class="rorigin"><a href="JavaScript:Void(0);" class="removeorigin btn btn-primary-outline btn-xs"><i class="fa fa-minus-circle" aria-hidden="true"></i></a></div></td>                     </tr>');
    });

 //remove row
 $('.origintable').on('click','.removeorigin',function() {
     $(this).closest("tr.origindiv").remove();
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="text-center origintable">
                        <tr class="origindiv">
                            <td >
                            <input type="text" /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Sender Number."></i>
                            </td>
              <td >
                            <input type="text"  /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Enter sender name."></i>
                            </td>

                        </tr>
                    </table>
          <a href="javascript:void(0);" class="addorigin btn btn-xs btn-primary-outline"><i class="fa fa-plus-circle"></i> Add More Row</a>

显示数据后不显示“添加”按钮

3 个答案: