How to add and remove rows and columns in html table with jquery

Question

How to add and remove rows and columns in html table with jquery

Navigation

#1 by (1 votes)

1

I have a table where I allow the user to insert / remove lines when I find it necessary, but what I need and can not adapt is to insert a block of Columns and Lines, but without success, I will try to show what I have. I have this table:

I'mtryingtoaddthiswholeblockwhentheuserclicksAdicionarLinha,IalreadydidsomesearchesandIdidnotfindanythingsimilarandmyknowledgeinJqueryislittle,almostnothing.

Theskeletonofthetablelookslikethis:

<tablewidth="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>

Add Line

JQuery that inserts lines is this:

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

But I could not adapt, as I said

html jquery

asked by anonymous 10.12.2018 / 19:05

1 answer

Lawtex - how to use logic based on the field of a Vector of structs? Navbar disappearing while lowering resolution

score 1 · Accepted Answer

Do not use onclick on the button, because it will not work because the function called by the event is out of scope, within (function($){ .

What you can do is create an event handler by pointing to the button and in the function of that event remove its block:

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

Clicking the "remove" button will remove the TBODY where the button is located.

To add a new block to the page load, create a copy (not clone) of the TBODY HTML and save it to a variable:

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

Whenever you want to add a new TR's block, just make a .append of copia in the table.

For the "Add" button, also create an event handler:

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

Let's see it working:

$(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><tablewidth="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>