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

7

当用户点击新按钮时,我希望您能添加一行。我想克隆行“tRow0”并将其添加到表“tblEquipment tbody”的最后一行。我编写了一个用于添加行(AddEquipment)的JavaScript函数。问题是该行未添加在最后一行。

克隆行:tRow0 最后一行:tRow1

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

我的javascript函数: 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);   

我的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>
4个回答

19

以下代码将克隆最后一行,并在表格中的最后一行之后添加:

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

$trLast.after($trNew);

工作示例: http://jsfiddle.net/kQpfE/2/


3

一种小懒的方法:

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

1

我认为你需要使用jQuery.append方法:http://api.jquery.com/append/
这里有一个示例,展示了如何选择页面上的元素并将其插入到另一个元素的末尾。


-2

Fletch已经有将近4年没有在SO上出现了,所以这个答案不会很快得到更新。 - James Moberg

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接