[英]New table row is not creating using JQuery clone method
我在該表中有一個表,其中有一個用於添加新行的按鈕。在該表中,當用戶單擊添加行按鈕時,我想動態添加新行。 我但是它不起作用。 HTML和JQuery代碼在JSFiddle中。 請提出建議。
<table id="myTable" border="1">
<tr>
@*<td>SR</td>*@
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
@*<td>1</td>*@
<td><input size=25 type="text" id="nmbox" /></td>
<td><input size=25 type="text" id="agbox" /></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addRow" value="Add " onclick="insRow()" /></td>
</tr>
</table>
var new_row1 = $('#mytable tr:last').clone();
$('#mytable').append(new_row1);
1)ID選擇器不匹配$('#myTable tr:last').
大寫T
2)id對於每個元素應該是唯一的。
function insRow(){ var new_row1 = $('#myTable tr:last').clone(); $('#myTable').append(new_row1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable" border="1"> <tr> @*<td>SR</td>*@ <td>Name</td> <td>Age</td> <td>Delete?</td> <td>Add</td> </tr> <tr> @*<td>1</td>*@ <td><input size=25 type="text" /></td> <td><input size=25 type="text" /></td> <td><input type="button" value="Delete" onclick="deleteRow(this)" /></td> <td><input type="button" value="Add " onclick="insRow()" /></td> </tr> </table>
要將子元素添加到沒有jQuery的克隆元素中:
clone = ElementTo.cloneNode();
while (ElementToBeCloned.firstChild){
clone.appendChild(ElementToBeCloned.lastChild);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.