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>