jQuery克隆並將行添加到最後一行

Question

我想在用戶單擊新按鈕時添加一行。我想克隆行「tRow0」並將其添加到表「tblEquipment tbody」的最後一行。我寫了一個用於添加行（AddEquipment）的JavaScript函數。問題是該行沒有被添加到最後一行。

克隆行：tRow0 最後一行：tRow1

其實新行必須添加後的「tRow1」 row.But新行得到如下補充說：「trActivity1_2」 row.Please爲我提供瞭解決方案。

我的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"> 
        &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> 

Answer 1

我覺得jQuery.append是你所需要的：http://api.jquery.com/append/
有一個示例顯示如何選擇頁面上的元素和i在最後插入另一個。

Answer 2

我寫了一個jQuery插件，可以讓你做到這一點。你可以添加和刪除行（使用動畫），它不需要用div或類似的東西包裝你的數據。瞧瞧吧http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

最佳，

陳偉偉

Answer 3

下面的代碼將克隆最後一排和最後一排後，在表中添加：

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

$trLast.after($trNew); 

工作例如：http://jsfiddle.net/kQpfE/2/