我想在用户点击新按钮时添加一行。我想克隆行“tRow0”并将其添加到表“tblEquipment tbody”的最后一行。我写了一个JavaScript函数来添加row（AddEquipment）。问题是该行未在最后一行添加。
克隆行：tRow0 最后一行：tRow1
实际上新行必须在“tRow1”行之后添加。但是新行添加在“trActivity1_2”行下面。请给我解决方案。
我的javascript函数： 功能AddEquipment（） {
var row = jQuery('#tRow0').clone(true).show().insertAfter('#tblEquipment tbody>tr:last');
var index = document.getElementById("hdnMaxEqpId").value;
jQuery("#tblEquipment tbody>tr:last").attr("id", "tRow" + index)
jQuery("td:eq(0) input", row).attr("id", "chkEqp" + index);
jQuery("td:eq(1) div:eq(0)", row).attr("id", "divEqpName" + index);
jQuery("td:eq(1) input:eq(0)", row).attr("id", "hdnWODefEqpId" + index).attr("name", "hdnWODefEqpId" + index);
jQuery("td:eq(1) input:eq(1)", row).attr("id", "hdnEquipmentId" + index).attr("name", "hdnEquipmentId" + index).attr("onpropertychange","");
jQuery("td:eq(1) input:eq(2)", row).attr("id", "txtEquipment" + index).attr("name", "txtEquipment" + index);
jQuery("td:eq(1) img", row).attr("id", "imgshowEquipmentTree" + index).attr("onclick", "");
jQuery("td:eq(1) div:eq(1)", row).attr("id", "divEqpImage" + index);
jQuery("td:eq(2) div", row).attr("id", "divEqpHierarchy" + index);
jQuery("td:eq(3) textarea", row).attr("id", "txtEqRemarks" + index);
jQuery("td:eq(4) img", row).attr("id", "imgEqAttachment" + index);
}
我的aspx页面：
<table id="tblEquipment">
<thead>
<tr>
<th>
</th>
<th>
Equipment</th>
<th>
Hierarchy</th>
<th>
Remarks</th>
<th>
Attachment</th>
<th>
Total Cost</th>
</tr>
</thead>
<tbody id="tbEquipment">
<tr id="tRow0" class="trChildItem">
<td>
<input id="chkEqp0" name="chkEqp0" type="checkbox" />
</td>
<td>
<div id="divEqpName0">
<input id="hdnWODefEqpId0" name="hdnWODefEqpId0" type="hidden" value="0" />
<input id="hdnEquipmentId0" name="hdnEquipmentId0"
onpropertychange="AutoSaveEquipment(0);" type="hidden" value="0" />
<input id="txtEquipment0" class="clsSpText" name="txtEquipment0" readonly />
</div>
<div id="divEqpImage0">
</div>
</td>
<td>
<div id="divEqpHierarchy0">
</div>
</td>
<td>
<textarea id="txtEqRemarks0" class="clsSpTextArea" cols="20"
name="txtEqRemarks0" rows="1"></textarea>
</td>
<td>
</td>
</tr>
<tr id="tActMaster0" class="trInnerChildItem">
<td>
</td>
<td colspan="5">
<div id="divActivitiesdetails0">
</div>
</td>
</tr>
<tr id="tRow1" class="trChildItem">
<td>
<input id="chkEqp1" runat="server" type="checkbox" />
<div id="divEqpEdit1">
</div>
</td>
<td>
<div id="divEqpName1">
<input id="hdnWODefEqpId1" runat="server" type="hidden" value="7" />
<input id="hdnEquipmentId1" runat="server" type="hidden" value="4" />
<div id="divEqp1">
e2</div>
<div id="divEqpImage1">
<a id="activiy1" onclick="HideActivities(1)">
</div>
</td>
<td>
<div id="divEqpHierarchy1">
Equipment-->e2</div>
</td>
<td>
<div id="divEqpRemarks1">
Remarks</div>
</td>
<td>
<div>
</div>
</td>
<td>
<div>
$0.00</div>
</td>
</tr>
<tr id="tActMaster1" class="trInnerChildItem" jquery1275984958765="3">
<td>
</td>
<td colspan="5">
<div id="divActivitiesdetails1">
<div id="divActivityMaster">
<table>
<thead>
<tr>
<th>
<a onclick="ActivityPopUp(0,1)">
</a></th>
<th>
Activity</th>
<th>
Description</th>
<th>
Duration</th>
</tr>
</thead>
<tbody id="tbActivity">
<tr id="trActivity1_1" class="trChildItem" ondblclick="ActivityPopUp(3,1)"
onmouseleave="HideActEditDiv('1_1')" onmouseover="ShowActEditDiv('1_1',7,1)">
<td>
<div id="divActEdit1_1">
</div>
</td>
<td>
<input id="hdnDefActivityId1_1" runat="server" type="hidden" value="33333" />
<div id="divActivityName1_1">
Act1</div>
</td>
<td>
<div id="divActivityDesc1_1">
Ac1</div>
</td>
<td>
<div id="divActivityDuration1_1">
1 Day</div>
</td>
</tr>
<tr id="trActivity1_2" class="trChildItem" ondblclick="ActivityPopUp(3,1)"
onmouseleave="HideActEditDiv('1_2')" onmouseover="ShowActEditDiv('1_2',7,1)">
<td>
<div id="divActEdit1_2">
</div>
</td>
<td>
<input id="hdnDefActivityId1_2" runat="server" type="hidden" value="4" />
<div id="divActivityName1_2">
Act2</div>
</td>
<td>
<div id="divActivityDesc1_2">
Act2Desc</div>
</td>
<td>
<div id="divActivityDuration1_2">
1 Day</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：13)
下面的代码将克隆最后一行并在表格的最后一行之后添加：
var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
答案 1 :(得分：1)
我认为jQuery.append是你需要的：http://api.jquery.com/append/
有一个示例显示如何选择页面上的元素并将其插入到另一个元素中。
答案 2 :(得分：0)
小懒：
$('#table tbody tr:last').clone().insertAfter('#table tbody tr:last');
答案 3 :(得分：-2)
我写了一个jQuery插件，可以让你这样做。您可以添加和删除行（带动画），它不需要使用div或类似的东西包装数据。请查看http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx
最佳，
陈伟伟