Skip to main content
removeu 1 caractere do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Repare que a array principal contém 2 índices ([1] e [2]) onde em cada umaum estão agrupados em índices (começando do 0) as linhas referentes a cada visão.

function clone($e) {

   $c = $($e).parents("tr");
   var v = $("input:eq(0)", $c).attr("name")[0]; // código da visão (1 ou 2)

   var ultimo = $("#clones [name^='"+v+"[']:last"); // pega o último input da visão clonada
   var idx = !ultimo.length ? 1 : +$(ultimo)[0].name.match(/\[(.+?)\]/)[1]+1; // pega o último índice clonado
   var klone = $($c).clone(); // elemento clonado
   
   $("input", klone).each(functionattr(){
      this.name ="name", v+"["+idx+"][]";v+"["+idx+"][]"); // altera os names de cada input
  do });clone
   
   klone.appendTo("#clones table"); // faz o append
}

Repare que a array principal contém 2 índices ([1] e [2]) onde em cada uma estão agrupados em índices (começando do 0) as linhas referentes a cada visão.

function clone($e) {

   $c = $($e).parents("tr");
   var v = $("input:eq(0)", $c).attr("name")[0]; // código da visão (1 ou 2)

   var ultimo = $("#clones [name^='"+v+"[']:last"); // pega o último input da visão clonada
   var idx = !ultimo.length ? 1 : +$(ultimo)[0].name.match(/\[(.+?)\]/)[1]+1; // pega o último índice clonado
   var klone = $($c).clone(); // elemento clonado
   
   $("input", klone).each(function(){
      this.name = v+"["+idx+"][]"; // altera os names de cada input
   });
   
   klone.appendTo("#clones table"); // faz o append
}

Repare que a array principal contém 2 índices ([1] e [2]) onde em cada um estão agrupados em índices (começando do 0) as linhas referentes a cada visão.

function clone($e) {

   $c = $($e).parents("tr");
   var v = $("input:eq(0)", $c).attr("name")[0]; // código da visão (1 ou 2)

   var ultimo = $("#clones [name^='"+v+"[']:last"); // pega o último input da visão clonada
   var idx = !ultimo.length ? 1 : +$(ultimo)[0].name.match(/\[(.+?)\]/)[1]+1; // pega o último índice clonado
   var klone = $($c).clone(); // elemento clonado
   
   $("input", klone).attr("name", v+"["+idx+"][]"); // altera os names de cada input do clone
   
   klone.appendTo("#clones table"); // faz o append
}
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Uma solução é criar padrões de arrays separando pelos códigos das visões. Por exemplo, digamos que clonei os campos desta forma:

inserir a descrição da imagem aqui

O resultado será:

Array
(
    [fx] => Array
        (
            [a] => 2020-01-01
            [b] => teste
            [c] => 123
        )

    [1] => Array
        (
            [0] => Array
                (
                    [0] => 1
                    [1] => 2
                    [2] => 3
                )

            [1] => Array
                (
                    [0] => 1
                    [1] => 2
                    [2] => 3
                )

        )

    [2] => Array
        (
            [0] => Array
                (
                    [0] => 4
                    [1] => 5
                    [2] => 6
                )

            [1] => Array
                (
                    [0] => 4
                    [1] => 5
                    [2] => 6
                )
        )
)

Repare que a array principal contém 2 índices ([1] e [2]) onde em cada uma estão agrupados em índices (começando do 0) as linhas referentes a cada visão.

Para conseguir isso, o padrão dos names devem ser:

<tr>
  <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
  <td><input type="number" name="1[0][]" value="1"></td>
  <td><input type="number" name="1[0][]" value="2"></td>
  <td><input type="number" name="1[0][]" value="3"></td>
</tr>
<tr>
  <th class="table-secondary"><button onclick="clone(this)">Visão 2</button></th>
  <td><input type="number" name="2[0][]" value="4"></td>
  <td><input type="number" name="2[0][]" value="5"></td>
  <td><input type="number" name="2[0][]" value="6"></td>
</tr>

As linhas que já aparecem na página devem começar com índice [0]. Por exemplo, ao clonar a linha "Visão 1", o clone será:

<tr>
  <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
  <td><input type="number" name="1[1][]" value="1"></td>
  <td><input type="number" name="1[1][]" value="2"></td>
  <td><input type="number" name="1[1][]" value="3"></td>
</tr>

Veja que foi criando um novo índice [1]. A clonar novamente a mesma linha, irá para [2] e assim sucessivamente.

Uma observação:

Como você está clonando linhas de tabela, as mesmas deveram ser inseridas numa table. Portanto a div #clones deverá ter uma table vazia para receber as linhas:

<div id="clones">
   <p>Clones</p>
   <table></table>
</div>

Você pode até colocar a id="clones" direto na tabela, mas deixei como está.

O código que irá fazer todo esse controle e alterações nos names é o que segue (veja comentários explicativos):

function clone($e) {

   $c = $($e).parents("tr");
   var v = $("input:eq(0)", $c).attr("name")[0]; // código da visão (1 ou 2)

   var ultimo = $("#clones [name^='"+v+"[']:last"); // pega o último input da visão clonada
   var idx = !ultimo.length ? 1 : +$(ultimo)[0].name.match(/\[(.+?)\]/)[1]+1; // pega o último índice clonado
   var klone = $($c).clone(); // elemento clonado
   
   $("input", klone).each(function(){
      this.name = v+"["+idx+"][]"; // altera os names de cada input
   });
   
   klone.appendTo("#clones table"); // faz o append
}

Ele basicamente altera o clone (names dos inputs) antes de fazer o append.