jQuery克隆并将行添加到最后一行

jQuery克隆并将行添加到最后一行,jquery,Jquery,每当用户单击new按钮时,我想添加一行。我想克隆行“tRow0”并将其添加到表“tblEquipment tbody”的最后一行。我编写了一个JavaScript函数来添加行(AddEquipment)。问题是该行没有添加到最后一行 克隆行:tRow0 最后一行:tRow1 实际上,新行必须添加在“tRow1”行之后。但是新行添加在“trActivity1_2”行下面。请提供解决方案 我的javascript函数: 函数附加设备() { } 我的aspx页面: <table id="tbl

每当用户单击new按钮时,我想添加一行。我想克隆行“tRow0”并将其添加到表“tblEquipment tbody”的最后一行。我编写了一个JavaScript函数来添加行(AddEquipment)。问题是该行没有添加到最后一行

克隆行:tRow0 最后一行:tRow1

实际上,新行必须添加在“tRow1”行之后。但是新行添加在“trActivity1_2”行下面。请提供解决方案

我的javascript函数: 函数附加设备() {

}

我的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">
                    &nbsp;</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--&gt;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&nbsp;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&nbsp;Day</div>
                                    </td>                                               
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>                

    </tbody>
</table>

装备
等级制度
评论
附件
总成本
e2
设备——e2
评论
$0.00
活动
描述
期间
行动1
Ac1
一天
行动2
Act2Desc
一天

我认为jQuery.append是您需要的:

有一个示例显示了如何在页面上选择一个元素,并在最后将其插入到另一个元素中。

我编写了一个jQuery插件,可以让您这样做。您可以添加和删除行(使用动画),而不需要使用div或类似的东西包装数据。查看

最好的


Fletch

下面的代码将克隆表中最后一行并添加到最后一行之后:

var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();

$trLast.after($trNew);
工作示例:

小懒人方式:

$('#table tbody tr:last').clone().insertAfter('#table tbody tr:last');

Fletch已经有4年没有出现在SO上了,所以这个答案不会很快更新。
$('#table tbody tr:last').clone().insertAfter('#table tbody tr:last');