jQuery之前无法使用html克隆（）和appendTo（）

Question

People am here because am having this code that actually doesnt work, it bassically duplicate a row and make a new row for a new entry. Am ussing clone() and appendTo() .

JSFIDDLE

But if you remove the last part of the html it will work, it seems like if there is a new tag it goes worng syntax, please could someone help me with this trouble?.

<table>
    <tr>
        <td>Hello world!</td>
   </tr>
</table>

Thanks!

Answer 1

There are few issues in your fiddle

1: the row element selected to be cloned is wrong.

2: parent element should be table but that is wrongly selected.

You can use the below modified code for cloning and appending the row.

 $("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");
    var parent = $("#data");
    var tr = $("#data tr:last");
    console.log(tr);
    var e = tr.clone().appendTo(parent);
    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });
  });

updated Fiddle : https://jsfiddle.net/363m6dsy/6/

Answer 2

Change the selector and use .after() to append

var tr = $("#parent:last");

    var e = $("#parent").clone();
    $(tr).after(e);

FULL JS

$(document).ready(function() {
  var i = 1;
  $("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");
    var tr = $("#parent:last");

    var e = $("#parent").clone();
    $(tr).after(e);
    console.log(e);
    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });
  });
  $("#remove").click(function() {
    var tr = $("#parent:last-child");
    if (i > 1) {
      i--;
      tr.remove();
    }
    if (i == 1) {
      $("#remove").attr("disabled", "true");
    }
  });
});

JSFIDDLE

Answer 3

Working fiddle .

Just clone row $("#parent").clone() then append it $('#data').append(e); like :

$("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");

    var e = $("#parent").clone();

    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });

    $('#data').append(e);
});

Hope this helps.

 $(document).ready(function() { var i = 1; $("#clone").click(function() { i++; $("#remove").removeAttr("disabled"); var e = $("#parent").clone(); $(e).find("[type=text],[type=hidden]").each(function() { $(this).val(''); }); $('#data').append(e); }); $("#remove").click(function() { var tr = $("#parent:last-child"); if (i > 1) { i--; tr.remove(); } if (i == 1) { $("#remove").attr("disabled", "true"); } }); }); 

 body { width: 700px; } table { width: 100%; } input[type="text"] { width: 130px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="data" name="data"> <tr> <td colspan="9"> <input type="button" value="Add" name="clone" id="clone"> <input type="button" value="Remove" name="remove" id="remove"> </td> </tr> <tr align="center"> <td rowspan="2">N°</td> <td rowspan="2">Activity</td> <td rowspan="2">Field1</td> <td rowspan="2">Resources</td> <td colspan="2">Dates</td> <td rowspan="2">Field2</td> <td rowspan="2">Date 1</td> <td rowspan="2">Status</td> </tr> <tr align="center"> <td>Start Date</td> <td>End Date</td> </tr> <tr name="parent" id="parent"> <td align="center"> <input id="val[]" name="val[]" type="text" value="1" required> <input id="val[]" name="val[]" type="hidden" value="13256"> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="2" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="3" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="4" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="5" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="6" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="7" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="8" required> </td> <td align="center"> <input id="val[]" name="val[]" type="text" value="9" required> </td> </tr> </table> <table> <tr> <td>Hello world!</td> </tr> </table>