jQuery Clone and add row to last row
- by user198880
I want to add a row whenever the user click on the new button.I want to clone the row "tRow0" and add it to the last row of the table "tblEquipment tbody".I wrote a JavaScript function for adding the row(AddEquipment).The problem is that the row is not getting added in the last row.
clone row : tRow0
last row : tRow1
Actually the new row must added after the "tRow1" row.But the new row get added below "trActivity1_2" row.Please provide me the solution.
my javascript function:
function 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);
}
my aspx page:
<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>
