1

Tenho uma tabela onde permito que o usuário insira/remova linhas quando achar necessário, mas o que estou precisando e não estou conseguindo adaptar é inserir um bloco de Colunas e Linhas, mas sem sucesso, vou tentar mostrar o que tenho. Tenho essa tabela:

inserir a descrição da imagem aqui

Estou tentando adicionar esse bloco todo quando o usuário clica em Adicionar Linha, já fiz algumas buscas e não encontrei nada parecido e meu conhecimento em Jquery é pouco, quase nada.

O esqueleto da tabela está assim:

<table width="60%" border="1" id="tabela-herdeiro" class="table">
<tbody>
    <tr>
        <td width="8%">Nome</td>
        <td width="23%">&nbsp;</td>
        <td width="10%">Nacionalidade</td>
        <td width="27%">&nbsp;</td>
        <td width="10%">Estado Civil</td>
        <td width="22%">&nbsp;</td>         
    </tr>
    <tr>
        <td>Residência</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Cônjuge</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="6" align="right"><button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRowPessoa(this)" type="button">Remover</button></td>
    </tr>       
</tbody>

  Adicionar Linha

O JQuery que faz a inserção de linhas é esse:

   (function($) {

    RemoveTableRowPessoa = function(handler) {
      var tr = $(handler).closest('tr');

      tr.fadeOut(400, function(){ 
        tr.remove(); 
      }); 

      return false;
    };



    AddTableRowPessoa = function() {

        var newRow = $("");
        var cols = "";

        cols += 'Nome  Nacionalidade  Estado Civil  RG  CPF  Residênvia  Cônjuge  RG Cônjuge  CPF Cônjuge ';

        cols += '';
        cols += 'Remover';
        cols += '';

        newRow.append(cols);

        $("#tabela-herdeiro").append(newRow);

        return false;
    };          



   })(jQuery);  

Mas não consegui adaptar, como disse

2

1 Resposta 1

1

Não use onclick no botão, até porque não vai funcionar devido a função chamada pelo evento estar fora do escopo, dentro de (function($){.

O que pode fazer é criar um event handler apontando para o botão e na função desse evento remover o respectivo bloco:

$(document).on("click", "#tabela-herdeiro button", function(){
   // REMOVER O BLOCO
});

Ao clicar no botão "remover" será removido o TBODY onde está o botão.

Para adicionar um novo bloco, no carregamento da página, crie uma cópia (não é clonar) do HTML do TBODY e salve numa variável:

var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;

Sempre que quiser adicionar um novo bloco de TR's, basta fazer um .append de copia na tabela.

Para o botão "Adicionar", crie também um event handler:

$("#adicionar").on("click", function(){
    $("#tabela-herdeiro").append(copia);
});          

Vamos ver funcionando:

$(function(){

   // já cria logo uma cópia do TBODY original
   var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;

    $(document).on("click", "#tabela-herdeiro button", function(){

      var tr = $(this).closest("tbody");
      
      tr.fadeOut(400, function(){
        this.remove(); 
      }); 

    });

    $("#adicionar").on("click", function(){
        $("#tabela-herdeiro").append(copia);
    });          

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="60%" border="1" id="tabela-herdeiro" class="table">
<tbody>
    <tr>
        <td width="8%">Nome</td>
        <td width="23%">&nbsp;</td>
        <td width="10%">Nacionalidade</td>
        <td width="27%">&nbsp;</td>
        <td width="10%">Estado Civil</td>
        <td width="22%">&nbsp;</td>         
    </tr>
    <tr>
        <td>Residência</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Cônjuge</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="6" align="right"><button class="btn btn-large btn-danger btn-xs" type="button">Remover</button></td>
    </tr>       
   
</tbody>
</table>
<br>
<button id="adicionar">Adicionar linha</button>

7
  • Fantástico, agradeço pelo excelente código, só mais uma pergunta, como posso copiar o estilo da tabela? Ao clicar no botão para Adicionar a tabela copiada fica sem a formatação da class="table". Commented 10/12/2018 às 20:10
  • Ixi rs.. era pra aplicar normalmente... se puder mandar um print de como está ficando facilitaria eu analisar
    – Sam
    Commented 10/12/2018 às 20:16
  • Tranquilo, o que fez já me ajudou muito, como passa o print? Commented 10/12/2018 às 20:25
  • 1
    Alterei todo o código. Copie novamente a faça um teste.
    – Sam
    Commented 10/12/2018 às 20:38
  • 1
    Blz... não precisa mais da classe "linhas" que eu havia sugerido. Abs!
    – Sam
    Commented 10/12/2018 às 20:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .