clonación de elementos con jquery

Estoy trabajando en un formulario en el que el usuario puede agregar filas como quiera. Hay un enlace llamado "agregar fila". Cuando se hace clic, quiero clonar una tabla oculta y cambiar sus valores de nombre, algunos de los nombres de las clases. ¿Alguien podría ayudarme con esto?

<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>

los enlaces que tienen .hata-ekle class, aumentando el valor de la entrada oculta y el intervalo junto a ella.

Si es necesario para una nueva fila, el usuario debe hacer clic en el enlace "agregar fila" y clonar nuevo .montaj la tabla debería aparecer pero --number-- debe reemplazarse con un número único.

¿Cómo puedo hacer esto?

Gracias...

preguntado el 31 de enero de 12 a las 08:01

1 Respuestas

OK,

No entiendo todo el proceso, pero puedo darte algunos consejos:

  1. Primer método : escribe una función tomando el número necesario en el parámetro y creando la tabla con las utilidades 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. Segundo método : clona su tabla y luego busca su entrada / intervalo y la vuelve a etiquetar:

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

Creo que hay aún más enfoque, estos son los dos que me vinieron primero a la mente. Estos no son necesariamente los mejores ...

Respondido el 31 de enero de 12 a las 12:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.