Repetir una estructura de manera dinámica las veces que se necesite

publicado por: Anonymous

Buenas, ¿como podría hacer para añadir un div y todo su contenido de nuevo?

Es decir, como podeis ver en el código, tengo un div que se llama modalFila3 y me gustaría que el usuario al clicar sobre el botón Añadir ejercicio pudiera añadir una línea más al formulario que está rellenando. Esa línea es equivalente al div con nombre ModalFila3.

En la parte de html he creado la parte que siempre será igual para todos los usuarios del formulario, pero este ha de poder ampliarse según considere en cada momento el usuario.

Como esto cambiará cada vez, no puedo tenerlo oculto e ir haciéndolo aparecer como con la estructura inicial, si no que debo crearlo mediante js (JQuery en mi caso). Mi duda es esa, como hago para “copiar” el div que me interesa y pegarlo tantas veces sea necesario.

Salud.

_x000D_

_x000D_

$('#Anyadir-Rutina-btn').click(function() {_x000D_
  //Hacemos aparecer el formulario del WOD_x000D_
  $('#Modal-Formulario').css('display', 'flex');_x000D_
_x000D_
  // "+ Ejercicio" Añade otra línea de ejercicio_x000D_
  $('#Anyadir-Ejercicio').click(function() {_x000D_
    ('#Modal-Formulario').append(_x000D_
      //AQUÍ DEBERÍA INSERTAR OTRA MODALFILA3_x000D_
    );_x000D_
  });_x000D_
});

_x000D_

/****** Btn insertar nuevo WOD ******/_x000D_
_x000D_
#Anyadir-Rutina-Box {_x000D_
  text-align: center;_x000D_
  margin-top: 40px;_x000D_
}_x000D_
_x000D_
#Anyadir-Rutina-btn {_x000D_
  background-color: #a3c6c4;_x000D_
  color: #FFF;_x000D_
  padding: 10px;_x000D_
  border-radius: 20px;_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
_x000D_
/***** Formulario insertar nuevo WOD *****/_x000D_
_x000D_
#Modal-Formulario {_x000D_
  height: auto;_x000D_
  width: 70%;_x000D_
  background-color: #354649;_x000D_
  margin: auto;_x000D_
  display: none;_x000D_
  flex-direction: column;_x000D_
  margin-top: 50px;_x000D_
  padding: 20px;_x000D_
  border-radius: 5px;_x000D_
}_x000D_
_x000D_
.ModalFila {_x000D_
  margin: 5px 0;_x000D_
}_x000D_
_x000D_
#ModalFila3 {_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
}_x000D_
_x000D_
#ModalFila4 {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
}_x000D_
_x000D_
.Inputs-Modal {_x000D_
  padding: 3px;_x000D_
}_x000D_
_x000D_
.TextoFormulario {_x000D_
  margin-right: 5px;_x000D_
}_x000D_
_x000D_
.BtnFormulario {_x000D_
  background-color: #a3c6c4;_x000D_
  border-color: transparent;_x000D_
  margin: 0 5px;_x000D_
  padding: 3px 8px;_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
.BtnFormulario:hover {_x000D_
  outline: 1px solid;_x000D_
  outline-color: #FFF;_x000D_
}_x000D_
_x000D_
#Titulo1 {_x000D_
  width: 80%;_x000D_
}_x000D_
_x000D_
#Titulo2 {_x000D_
  width: 80%;_x000D_
}_x000D_
_x000D_
#Titulo3 {_x000D_
  width: 40%;_x000D_
}_x000D_
_x000D_
#Guardar-modal-btn {_x000D_
  margin-right: 5px;_x000D_
}_x000D_
_x000D_
_x000D_
/***** Tabla donde se muestran los WODs *****/_x000D_
_x000D_
#Tabla-Rutinas {_x000D_
  height: auto;_x000D_
  width: 70%;_x000D_
  border: solid 1px;_x000D_
  margin: auto;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="Power-Contenedor">_x000D_
_x000D_
  <h1> Diario de entreno</h1>_x000D_
_x000D_
  <!-- Tabla donde se muestran los WODs -->_x000D_
  <table id="Tabla-Rutinas">_x000D_
  </table>_x000D_
_x000D_
  <!-- Formulario para insertar nuevo WOD -->_x000D_
  <div id="Modal-Formulario">_x000D_
    <div class="ModalFila" id="ModalFila1">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Título">_x000D_
    </div>_x000D_
    <div class="ModalFila" id="ModalFila2">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Objetivo">_x000D_
    </div>_x000D_
    <div class="ModalFila" id="ModalFila3">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Ejercicio">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Herramienta">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Rondas">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Repeticiones">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Peso propuesto">_x000D_
      <input type="text" class="Inputs-Modal TextoFormulario" placeholder="Peso final">_x000D_
    </div>_x000D_
    <div class="ModalFila" id="ModalFila4">_x000D_
      <input type="button" class="Inputs-Modal BtnFormulario" value="Guardar">_x000D_
      <input type="Button" class="Inputs-Modal BtnFormulario" value="Cancelar">_x000D_
      <input type="button" class="Inputs-Modal BtnFormulario" value="+ Objetivo">_x000D_
      <input type="button" class="Inputs-Modal BtnFormulario" id="Anyadir-Ejercicio" value="+ Ejercicio">_x000D_
    </div>_x000D_
  </div>_x000D_
_x000D_
  <!-- Btn para hacer aparecer formulario "nuevo WOD" -->_x000D_
  <div id="Anyadir-Rutina-Box">_x000D_
    <a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>_x000D_
  </div>_x000D_
_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

SOLUCIONADO gracias al consejo de @Yikarus

$('#Anyadir-Ejercicio').click(function(){
        // Clono la fila 3.
        var clonModalFila3 = $('#ModalFila3').clone();
        $('#ModalFila3').after(clonModalFila3);
    });
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *