how to replicate a dynamic table

0

How do I load exactly the same structure I create on another screen?

Next, I have this registration screen where clicking on the "+" button will add text type inputs (according to the attached code) My problem is that this creation is dynamic, the person can add both 1, 4 ..or it's N. I'm going to save this data and I need to replicate this same structure on another screen. That is, it will load all the text inputs created in the addition screen. How can I "copy" every structure and replicate on another screen?

    
asked by anonymous 12.07.2017 / 17:40

1 answer

1

Come on.

var copia;

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div class="itens">';
  html += '<div id="radios"><input type="radio" disabled style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="" class="form-control radio-alinha text" placeholder="Adicionar Alternativa"><a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div></div>';
  //html += '<input type="text" placeholder="Nova Entrada">';
  //html += '<a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div>';

  $('#campos').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição

$(function(){
    $('.del').click(function(event){
      event.preventDefault();   
    $(this).parent().remove();
    });
});

});

$('#btnexp').on('click', function(){
  
    copia = $('#exp').html();
  
});

$('#btnexibir').on('click', function(){
  
    $('.copiada').html(copia);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
                     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                     <div class="form-group esconder" id="id_TME">
                        <div class="panel panel-default" id='exp'>
                           <div class="panel-body">
                              <div id="multipla-escolha">
                              </div>

                              <div id="campos"></div>
                              <button id="add" class="btn btn-primary btn-md">
                              <span class="glyphicon glyphicon-plus" aria-hidden="true">                                  
                              </span>
                              </button>


                           </div>
                        </div>
                        <button ng-click="adicionaTarefa()" type="button" class="btn btn-primary btn-md" data-dismiss="modal" id="btn-cadastra-tarefa"><span class="glyphicon glyphicon-ok-sign"></span> Salvar</button>
                     </div>

<div id='btnexp'>Copiar</div>
<div id='btnexibir'>Exibir Copia</div>

<div class='copiada'></div>

      <script src="bootstrap/js/bootstrap.min.js"></script>

What was done

I created a global variable called copia which will get all the contents of the div of class panel panel-default , I created a id='exp' for it.

jquery's .html () event gets ALL the contents of the selected div.

We apply all this content to the variable copia . And later we assign the contents of this variable to another div, for the copy to be performed.

To visualize the operation do what you want with the inputs, then click copy and then copy.

Remembering that I'm showing you how to replicate the exact contents of the div. You will have to adapt to your own code.

    
13.07.2017 / 14:12