Question

这是我想要附加div的html代码。我想在（.row-table）最后一个孩子之后追加div。我是jquery的新手，我觉得我做错了。

<div class="details-box-table">

    <div class="row-table">
        <div class="rTableHead"><label for="Traveldate">S.No</label></div>
        <div class="rTableHead"><label for="Traveldate">Amount</label></div>
        <div class="rTableHead"><label for="Traveldate">Mode</label></div>
        <div class="rTableHead"><label for="Traveldate">Bank Name</label></div>
        <div class="rTableHead"><label for="Traveldate">Date</label></div>
        <div class="rTableHead"><label for="Traveldate">Remarks</label></div>
        <div class="rTableHead"><label for="Traveldate">Action</label></div>
    </div>

<div class="row-table">
        <div class="rTableHead"><label for="Traveldate">1</label></div>
        <div class="rTableHead"><label for="Traveldate">2000</label></div>
        <div class="rTableHead"><label for="Traveldate">Cash</label></div>
        <div class="rTableHead"><label for="Traveldate">UT Bank</label></div>
        <div class="rTableHead"><label for="Traveldate">02/03/2017</label></div>
        <div class="rTableHead"><label for="Traveldate">Remarks</label></div>
        <div class="rTableHead"><label for="Traveldate">Notngin</label></div>
    </div>




<div>I want to append here new div after last class"row-table"</div>

这是Jquery代码。

$(document).ready(function(){

    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".details-box-table"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).children(".row-table").last().after('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Answer 1

假设您还没有忘记在HTML中添加<button id="add_field_button>，其余代码似乎都能正常运行：

＆＃13;

$(document).ready(function() {

  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".details-box-table"); //Fields wrapper
  var add_button = $("#add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).children(".row-table").last().after('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add_field_button">Add Field</button>

<div class="details-box-table">

  <div class="row-table">
    <div class="rTableHead"><label for="Traveldate">S.No</label></div>
    <div class="rTableHead"><label for="Traveldate">Amount</label></div>
    <div class="rTableHead"><label for="Traveldate">Mode</label></div>
    <div class="rTableHead"><label for="Traveldate">Bank Name</label></div>
    <div class="rTableHead"><label for="Traveldate">Date</label></div>
    <div class="rTableHead"><label for="Traveldate">Remarks</label></div>
    <div class="rTableHead"><label for="Traveldate">Action</label></div>
  </div>

  <div class="row-table">
    <div class="rTableHead"><label for="Traveldate">1</label></div>
    <div class="rTableHead"><label for="Traveldate">2000</label></div>
    <div class="rTableHead"><label for="Traveldate">Cash</label></div>
    <div class="rTableHead"><label for="Traveldate">UT Bank</label></div>
    <div class="rTableHead"><label for="Traveldate">02/03/2017</label></div>
    <div class="rTableHead"><label for="Traveldate">Remarks</label></div>
    <div class="rTableHead"><label for="Traveldate">Notngin</label></div>
  </div>


  <!-- I want to append here new div after last class"row-table" -->
</div>

＆＃13;

Answer 2

我添加了关于我添加的部分的评论。我实施了add链接。代码将自动删除文本框，然后将内部数据添加到追加区域（我将其命名为.appendTo）。

$(document).ready(function(){
    /* NEW CODE */
    $(wrapper).on("click",".add_field", function(e){ //user click on remove text
        e.preventDefault();
        $parent = $(this).parent('div');
        $('<div class="row-table">')
          .append($parent.find("input").val())
          .appendTo(".appendTo");
        $parent.remove();
        x--;
    });
    /* END NEW CODE */

    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".details-box-table"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).children(".row-table").last().after('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a> <a href="#" class="add_field">Add</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="details-box-table">

    <div class="row-table">
        <div class="rTableHead"><label for="Traveldate">S.No</label></div>
        <div class="rTableHead"><label for="Traveldate">Amount</label></div>
        <div class="rTableHead"><label for="Traveldate">Mode</label></div>
        <div class="rTableHead"><label for="Traveldate">Bank Name</label></div>
        <div class="rTableHead"><label for="Traveldate">Date</label></div>
        <div class="rTableHead"><label for="Traveldate">Remarks</label></div>
        <div class="rTableHead"><label for="Traveldate">Action</label></div>
    </div>

<div class="row-table">
        <div class="rTableHead"><label for="Traveldate">1</label></div>
        <div class="rTableHead"><label for="Traveldate">2000</label></div>
        <div class="rTableHead"><label for="Traveldate">Cash</label></div>
        <div class="rTableHead"><label for="Traveldate">UT Bank</label></div>
        <div class="rTableHead"><label for="Traveldate">02/03/2017</label></div>
        <div class="rTableHead"><label for="Traveldate">Remarks</label></div>
        <div class="rTableHead"><label for="Traveldate">Notngin</label></div>
    </div>
<button id="add_field_button">Add Butn</button>

<!-- I added the class 'appendTo' here -->
<div class="appendTo">I want to append here new div after last class"row-table"</div>

如何在Jquery的一些分支后追加Div

2 个答案: