jquery的克隆元素

我正在製作一個表單，用戶可以根據需要添加行。有一個名爲「添加行」的鏈接，當它點擊時，我想克隆一個隱藏的表並更改它的名稱值和一些類名。有誰能幫我解決這個問題嗎？jquery的克隆元素

<table class="montaj montaj-satir"> 
    <tr> 
     <td width="62px"><input type="text" name="oper[--number--][kodu]" size="4" maxlength="4" /></td> 
     <td width="38px"> 
      <input type="checkbox" name="oper[--number--][onay]" value="1" /> 
      <input type="hidden" name="oper[--number--][terminal_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][soket_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][montaj_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][yon_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][push_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][olcu_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][bant_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][vida_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][komponent_hatasi]" value="0" /> 
     </td> 
     <td width="62px"><span class="terminal_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="terminal_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="soket_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="soket_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="montaj_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="montaj_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="yon_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="yon_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="push_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="push_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="olcu_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="olcu_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="bant_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="bant_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="vida_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="vida_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="komponent_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="komponent_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
    </tr> 
    <tr> 
     <td colspan="2">Kablo Sıra No</td> 
     <td colspan="4"><input type="text" name="oper[--number--][kablo_sira_no]" value="" /></td> 
     <td colspan="2">Açıklama</td> 
     <td colspan="3"><input type="text" name="oper[--number--][aciklama]" value="" /></td> 
    </tr> 
</table>

有.hata-ekle類的鏈接，增加了隱藏輸入的值和跨度旁邊。

如果有需要的新行，用戶應該點擊「添加行」鏈接和新克隆.montaj表應該出現，但--number--應當有一個唯一編號來代替。

我怎樣才能做到這一點？

謝謝...

來源

2012-01-31 Valour

OK，

我不明白整個過程，但我可以給你一些提示：

第一種方法：你寫一個函數在參數中使用所需的數字並使用jQuery實用程序創建表格：

function addTable(number) { 
    var table = $('<table>'); 
    var tr = $('<tr>').appendTo(table); 
    var td = $('<td>').appendTo(tr); 
    var span = $('<span>').appendTo(td).addClass('terminal_hatasi'+number) 
    ... 
}

方法二：你克隆你的表，然後你搜索你輸入/跨度和重新標記它：

function addTable(number) { 
    var clone = $('table.montaj').first().clone(); 

    clone.find('input').each(function(item){ 
    var name = $(this).attr('name'); 
    $(this).attr('name',name.replace(/\d/,number)); 
    }); 

    ... 

    $(body).append(clone); 
}

我認爲還有更多的辦法，這是兩個先到我心神。這些不一定是最好的...

來源

2012-01-31 08:48:00

jquery的克隆元素

回答

相關問題