Dynamic table with edit and delete dynamics

Question

Dynamic table with edit and delete dynamics

Navigation

#1 by (1 votes)

0

I have in the forms of payment of my invoice form a table for checks that appears when clicking on add. More specifically, a check row appears to enter all the data. On the right you have an action button to confirm.

The idea is that when confirming if nothing fails and the check is inserted, another row appears with edits. And in the action column instead of an accept, edit or delete (use glypicons).

$("#agregarc").click(function(){
  
    var datoscheque='<tr><td><div>'+
    '<select id="bancos"><option value"=0">Seleccione<option></select></div></td>'+
    '<td><input type="text" class="form-control" id="nrocuenta" placeholder="CtaBancaria"/>'
    +'</td>'+
    
    '<td><input type="text"class="form-control" id="titular" placeholder="Titular"/></td>'+
  +'<div>'+'<td><input type="text" class="form-control" id="CUIT" placeholder="CUIT"/></td>'+
  '<td><input type="text"class="form-control" id="Importe" placeholder="Son pesos"/></td>'
    +
    '<td><input type="date" class="form-control" id="fechacobro"placeholder="Deposito el:"/></td>'+
 
    '<td><button id="acreditar" class="btn btn-primary"><span id="acreditar" class="glyphicon glyphicon-ok"></span></button></td><td></td></tr>';

$(datoscheque).appendTo("#cheques");
    listarbancos(); 


  
  $("#acreditar").click(function(){
	 
    var Banco=$("#bancos").val();
    var Importe=$("#Importe").val();

    var nroCuenta=$("#nrocuenta").val();
    var titular=$("#titular").val();
    var fechacobro=$("#fechacobro").val();
    var CUIT=33;
    var cobrado=0;
    var d = new Date();
    var fecharecibo=d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
   
    
     $.ajax({
                                                        type: "POST",
                                                        url: "//localhost/gestionweb/includes/php/ingresacheque.php",
                                                        data: { "idbanco":Banco,"idc":idcliente,"num":nroCuenta,"fechar":fecharecibo,"fechac":fechacobro,"importe":Importe,"titular":titular,"cuenta":nroCuenta,"cobrado":cobrado,"CUIT":CUIT},
                                                   
                                            
                                                        error: function(){
                                                            alert("error petición ajax");
                                                           
                                                        },
                                                        
                                                        success: function(data){
                                                         
                                                            console.log(data); 
                                                                  
                                                                }
                                                        
                                                    });
    $("#cheques").val(Importe);
});

});

That's how I convert the edits into labels and change the buttons?

javascript

asked by Caruso 15.10.2018 в 20:08

source

1 answer

How to pass a Javascript data to an input? JTabbedPane Tabs are not visible

score 1 · Accepted Answer

Try to emulate your table to make an example, it's just to guide you in what you ask for. To add the new row I did what you did in append () , but before I got the values, I told you to place the last row and I went looking for each TD to go setting the html with the value obtained previously like this:

        var Banco=$("#bancos").val();
        var nroCuenta=$("#nrocuenta").val();
        var titular=$("#titular").val();
        var fechacobro=$("#fechacobro").val();
        var cuit=$("#cuit").val();
        var importe=$("#importe").val();

        $("table tbody tr:last td:eq(0)").html(Banco);
        $("table tbody tr:last td:eq(1)").html(nroCuenta);
        $("table tbody tr:last td:eq(2)").html(titular);
        $("table tbody tr:last td:eq(3)").html(cuit);
        $("table tbody tr:last td:eq(4)").html(importe);
        $("table tbody tr:last td:eq(5)").html(fechacobro);

Then indicate that where the last button with the #agregarc id is, get the parent container with the .parent () to locate its td and then set the html like this:

$("#agregarc:last").parent()
.html('<button class="eliminar">Eliminar</button>');

With this I put the delete button, then I do the append of the new row.

$("#agregarFila").click(function(){
    
    var Banco=$("#bancos").val();
    var nroCuenta=$("#nrocuenta").val();
    var titular=$("#titular").val();
    var fechacobro=$("#fechacobro").val();
    var cuit=$("#cuit").val();
    var importe=$("#importe").val();
 
    $("table tbody tr:last td:eq(0)").html(Banco);
    $("table tbody tr:last td:eq(1)").html(nroCuenta);
    $("table tbody tr:last td:eq(2)").html(titular);
    $("table tbody tr:last td:eq(3)").html(cuit);
    $("table tbody tr:last td:eq(4)").html(importe);
    $("table tbody tr:last td:eq(5)").html(fechacobro);
    
    $("#agregarc:last").parent()
    .html('<button class="eliminar">Eliminar</button>');
    
    var nuevaFila = '<tr>
                        <td>
                          <select id="bancos">
                            <option value="banco1">banco1</option>
                            <option value="banco2">banco2</option>
                            <option value="banco3">banco3</option>
                          </select>
                        </td>
                        <td>
                          <input type="text" id="nrocuenta">
                        </td>
                        <td>
                          <input type="text" id="titular">
                        </td>
                        <td>
                          <input type="text" id="cuit">
                        </td>
                        <td>
                          <input type="text" id="importe">
                        </td>
                        <td>
                          <input type="text" id="fechacobro">
                        </td>
                        <td>
                          <button id="agregarc">Confirmar</button>
                        </td>
                      </tr>';

  $("table tbody").append(nuevaFila); 
  
  $(".eliminar:last").on("click",function(){
    $(this).parents("tr").remove();
  });

});

<table>
  <thead>
    <th>Banco</th>
    <th>Cuenta No.</th>
    <th>No. Serie</th>
    <th>CUIT</th>
    <th>Importe</th>
    <th>Fecha Cobro</th>
    <th>Accion</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <select id="bancos">
          <option value="banco1">banco1</option>
          <option value="banco2">banco2</option>
          <option value="banco3">banco3</option>
        </select>
      </td>
      <td>
        <input type="text" value="22222444444" id="nrocuenta">
      </td>
      <td>
        <input type="text" value="David" id="titular">
      </td>
      <td>
        <input type="text" value="CUIT" id="cuit">
      </td>
      <td>
        <input type="text" value="1245" id="importe">
      </td>
      <td>
        <input type="text" value="01/02/2018" id="fechacobro">
      </td>
      <td>
        <button id="agregarc">Confirmar</button>
      </td>
    </tr>
  </tbody>
</table>

<button id="agregarFila">Agregar fila</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I hope you find it useful.