Generate and delete rows from a table with Jquery

Asked

Viewed 35 times

-3

I made a function that generates lines in a table but I’m not able to delete them.

Could someone tell me how I can add and remove every time I click the buttons?

Function generating the lines

var i = 0;

$('#addRow').click(function(){
    // GERA UMA PROXIMA LINHA
    $('<tr id="t_row'+i+'">'+
        '<th></th>'+
        '<td>'+periodo[i]+'</td>'+
        '<td><input type="text" class="form-control" style="width:150px;"></td>'+
        '<td></td>'+
        '<td></td>'+
        '<td></td>'+
    '</tr>').appendTo('tbody');

    i++;


    // PARA O BOTAO QUANDO CHEGAR NO 12
    if(i == 12){
        $('#addRow').prop("disabled", true);
    }
    return false;

});

Function that removes lines

$('#delRow').click(function(){

    $('t_row'+i).remove();  

    i--;

    return false;
});

HTML buttons

<div class="col-md-4">
    <button class="btn btn-primary" id="addRow" >Adicionar linha</button>
</div>
<div class="col-md-4">
    <button class="btn btn-danger" id="delRow">Apagar linha</button>
</div>

HTML table

<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Meses</th>
                <th scope="col">Periodo</th>
                <th scope="col">Demanda(Y)</th>
                <th scope="col">X</th>
                <th scope="col">X<sup>2</sup></th>
                <th scope="col">X*Y</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot style="background-color: #009127;">
            <tr>
                <th scope="col" id="total_1">...</th>
                <th scope="col">...</th>
                <th scope="col" id="total_2">...</th>
                <th scope="col" id="total_3">...</th>
                <th scope="col" id="total_4">...</th>
                <th scope="col" id="total_5">...</th>
            </tr>
        </tfoot>
    </table>
</div>
javascript html jquery

  • Where do you define the i of $('#delRow').click? I imagine he’s doing the following $('t_rowundefined').remove()

  • This as global. I forgot to show it.

  • Put the table with some data, please.

  • Carlos is missing # in $('t_row'+i).remove(); , should be $('#t_row'+i).remove();

1 answer

0


There are two problems with your script. The first is that i is being decremented after removing the line, so it will try to decrement a line that has not yet been created. The second is that you put $('t_row'+i).remove();, logo is not referring to any element, to access the id, missed the #. Follow example with the corrected script:

var i = 0;

$('#addRow').click(function(){
    // GERA UMA PROXIMA LINHA
    $('<tr id="t_row'+i+'">'+
        '<th></th>'+
        '<td>teste'+i+'</td>'+
        '<td><input type="text" class="form-control" style="width:150px;"></td>'+
        '<td></td>'+
        '<td></td>'+
        '<td></td>'+
    '</tr>').appendTo('tbody');
    i++;
    // PARA O BOTAO QUANDO CHEGAR NO 12
    if(i == 12){
        $('#addRow').prop("disabled", true);
    }
    return false;
});

$('#delRow').click(function(){
    i--;
    $('#t_row'+i).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
  </tbody>
</table>
<div class="col-md-4">
    <button class="btn btn-primary" id="addRow" >Adicionar linha</button>
</div>
<div class="col-md-4">
    <button class="btn btn-danger" id="delRow">Apagar linha</button>
</div>

Another problem is that you didn’t put a stop point on the decrease, which can make i turn negative and that create more than 12 lines, since it would go from -n to 12.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.