How to add a table dynamically with jquery?

Question

How to add a table dynamically with jquery?

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I am trying to add a table in which encloses the inputs that I show below, the headers are static but I have not been able to add them successfully because if I create the table the delete button stops working, clarify that this button was designed to eliminate a single input and I would like it to work and delete all my fields row by row:

$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div><input type="text" name="parametros[]"/> <input type="text" name="unidad[]"/> <input type="text" name="especificacion[]"/> <input type="text" name="resultado[]"/> <a href="#" class="delete">Eliminar</a></div>'); //add input box
        }
  else {
     alert('You Reached the limits')
  }
    });

    $(wrapper).on("click",".delete", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Agregar malla o fondo &  nbsp; 
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>

<table class="table-bordered table-striped">
  <tr>
    <th>PÁRAMETRO</th>
    <th>UNIDAD</th> 
    <th>ESPECIFICACIÓN</th>
    <th>RESULTADO</th>
  </tr>
</table>
</div>

javascript jquery html

asked by Daniel Treviño 05.09.2017 в 21:34

source

2 answers

2

According to what I understand of your publication, we must create the records in the table (ie <tr> ) then the delete button must delete the entire row ( <tr> ):

Create your rows <tr> instead of <div> :

$(wrapper).children('table').append('<tr><td><input type="text" name="parametros[]"/></td><td><input type="text" name="unidad[]"/></td><td><input type="text" name="especificacion[]"/><td></td><input type="text" name="resultado[]"/><td></td><td><a href="#" class="delete">Eliminar</a></<td></tr>'); //add input box

Then you set the delete method to use the <tr> instead of <div> :

$(wrapper).on("click",".delete", function(e){
    e.preventDefault(); $(this).parent('td').parent('tr').remove(); x--;
})

answered by 05.09.2017 в 21:58

Primary key composite not self incremental or simple primary key not auto incremental in MySQL? How to add events to a list of buttons in a cycle with Jquery?

score 1 · Accepted Answer

If you are looking to do that in a table the code would be the following:

 $(document).ready(function() {
    $("#masfilas").click(function(){
        $("#mytable").append('<tr><td><input type="text" name="parametros[]"/></td><td> <input type="text" name="unidad[]"/></td><td> <input type="text" name="especificacion[]"/></td><td> <input type="text" name="resultado[]"/></td><td> <a href="#" class="delete">Eliminar</a></td></tr>');
        $('.delete').off().click(function(e) {
            $(this).parent('td').parent('tr').remove();
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<button id="masfilas" class="add_form_field">Agregar malla o fondo &  nbsp; 
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>

<table id="mytable" class="table-bordered table-striped">
  <tr>
    <th>PÁRAMETRO</th>
    <th>UNIDAD</th> 
    <th>ESPECIFICACIÓN</th>
    <th>RESULTADO</th>
    <th>opciones</th>
  </tr>
</table>
</div>