клонирование элементов с помощью jquery

Question

Я работаю над формой, в которую пользователь может добавлять строки по своему усмотрению. Есть ссылка с именем «Добавить строку». Когда она нажата, я хочу клонировать скрытую таблицу и изменить ее значения, некоторые имена классов. Может ли кто-нибудь помочь мне об этом?

<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-- следует заменить уникальным номером.

Как я могу это сделать?

Спасибо ...

Answer 1

OK

Я не понимаю весь процесс, но могу дать вам несколько советов:

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)
     ...
   }
   

2. Второй метод : вы клонируете свою таблицу, а затем ищете свой ввод / диапазон и заново помечаете его:

   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);
   }
   

Я думаю, что есть еще больше подходов, эти два пришли мне в голову первыми. Это не обязательно лучше ...