jQuery不能克隆（）和appendTo（）与HTML之前

Question

人们在这里，因为我有这个代码，实际上不工作，它低音复制一行，并为新条目新行。正在使用clone()和appendTo()。

JSFIDDLE

但是，如果你删除HTML，将工作的最后一部分，它好像如果有一个新的标签它去拨错的语法，请可能有人能帮我解决这个麻烦？

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

谢谢！

Answer 1

有几个问题在你的提琴

1：选择要克隆的行元素是错误的。

2：父元素应该是表，但这是错误的选择。

您可以使用下面修改的代码来克隆和追加行。

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

更新小提琴：https://jsfiddle.net/363m6dsy/6/

Answer 2

变化选择和使用.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"); 
    } 
    }); 
}); 

JSFIDDLE

Answer 3

Working fiddle。

只是克隆行$("#parent").clone()然后将其追加$('#data').append(e);，如：

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

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

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

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

希望这有助于。

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