jQuery kann nicht klonen() und appendTo() mit html vor

Question

Leute sind hier, weil ich diesen Code habe, der tatsächlich nicht funktioniert, es bügelt dupliziere eine Reihe und mach eine neue Reihe für einen neuen Eintrag. Am ussing clone() und appendTo().

JSFIDDLE

Aber wenn Sie den letzten Teil des html entfernen wird es funktionieren, wie es scheint, wenn es einen neuer Tag ist es geht worng Syntax, bitte jemand mir mit diesem Problem helfen könnte ?.

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

Vielen Dank!

Answer 1

Es gibt einige Probleme in Ihrer Geige

1: das Zeilenelement ausgewählt geklont werden falsch ist.

2: Elternelement sollte Tabelle sein, aber das ist falsch ausgewählt.

Sie können den folgenden modifizierten Code zum Klonen und Anhängen der Zeile verwenden.

$("#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(''); 
    }); 
    }); 

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

Answer 2

Ändern der Wähler und verwenden .after()

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"); 
    } 
    }); 
}); 

anhängen 01210

Answer 3

Working fiddle.

Gerade Klon Reihe $("#parent").clone() dann hängen Sie es $('#data').append(e); wie:

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

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

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

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

Hoffnung, das hilft.

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