I want to add a line whenever a user clicks on a 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 to add row (AddEquipment). The problem is that the line is not added to the last line.
clone line: tRow0 last line: tRow1
In fact, a new line should be added after the line "tRow1". But a new line is added below the line "trActivity1_2". Give me a solution.
my javascript function: AddEquipment () function {
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>