0

Tengo en las formas de pago de mi formulario de factura una tabla para cheques que aparece al hacer click en agregar. Mas concretamente aparece una fila de cheque para ingresar todos los datos. A la derecha tiene un boton de accion para confirmar.

La idea es que al confirmar si no falla nada y se inserta el cheque aparezca otra fila con edits. Y en la columna de accion en vez de un aceptar, un editar o un borrar(uso 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);
});

});

introducir la descripción de la imagen aquí

Osea como convierto los edits en labels y cambio los botones?

1 respuesta 1

1

Trate de emular tu tabla para hacer un ejemplo, es solo para guiarte en lo que pide. Para agregar la nueva fila hice lo que tu un append(), pero antes obtuve los valores luego le indique que me ubicara la ultima fila y fui buscando cada TD para ir seteando el html con el valor obtenido anteriormente así:

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

Luego le indique que en donde se encuentre el ultimó botón con el id #agregarc obtuviese el contenedor padre con el .parent() para ubicar a su td y luego setearle el html así:

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

Con esto le coloco el botón eliminar, luego hago el append de la nueva fila.

$("#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>

Espero que te sea de utilidad.

1
  • Me sirvio mucho ya hice eliminar, pero me faltaria un editar que ponga los labels en edits dentro de la misma fila.Muchas gracias
    – Caruso
    Commented el 17 oct. 2018 a las 18:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.