使用 jquery 克隆元素答案

【问题标题】：cloning elements with jquery使用 jquery 克隆元素
【发布时间】：2012-01-31 08:17:30
【问题描述】：

我正在开发一种用户可以根据需要添加行的表单。有一个名为“添加行”的链接，当它点击时，我想克隆一个隐藏表并更改它的名称值，一些类名。有人可以帮我解决这个问题吗？

<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-- 应替换为唯一编号。

我该怎么做？

谢谢...

【问题讨论】：

标签： jquery replace

【解决方案1】：

好的，

我不明白整个过程，但我可以给你一些指点：

第一种方法：您编写一个函数，在参数中获取所需的数字并使用 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);
}

我觉得还有更多的办法，这两个是我最先想到的。这些不一定是更好的......

【讨论】：