2

Hola buenos días¡¡¡ estoy realzando una tabla en html la cual cuenta con un botón agregar el cual al darle "clic" aparece un renglón nuevo vacío para que el usuario lo llene, mi pregunta es como se pueden sumar la cantidades de las columnas y que se genere otro renglón con el total al final

<!DOCTYPE html>
<html lang="es">
<head>
    <title>HTML to PDF</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <script>
    $(document).ready(function(){
        $('#bt_add').click(function(){
            agregar();
        });


    });
    var cont=0;
    var id_fila_selected=[];
    function agregar(){
        cont++;
        var fila='<tr contenteditable="true" id="fila" onclick="seleccionar(this.id);"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
        $('#tabla').append(fila);
        reordenar();
    }



</script>

</head>
<body >
<div  id="HTMLtoPDF">

    <div class="container">
        <div class="row justify-content-around">
            <div class="card-header text-center font-size:20% text-uppercase py-4" style="background: none">
                <h2 >PAGOS BANCARIOS</h2>
            </div>

        </div>
        <div id="content">


        <table  id="tabla" class="table table-bordered" >
        <thead>
        <tr>
                <td>RPE</td>
                <td>DIA DEPOSITO</td>
                <td>CARGA EN SICOM</td>
                <td>$ BANCO DE REFERENCIA</td>
                <td>$ CHEQUE</td>
                <td>$ TERMINAL CAC</td>
                <td>TIPO DE PAGO</td>
                <td>BANCO</td>
                <td>REFERENCIA/APROBACION</td>
            </tr>
        </thead>
    </table>

    </div>

    </div>

    </div>

    <!-- here we call the function that makes PDF -->
    <div class="container">
        <div class="row">

            <div class="col-sm-3 align-self-center">
                <button id="bt_add" class="btn btn-default">Agregar</button>
            </div>

            <div class="col-sm-3 align-self-center">
                <button id="bt_add" class="btn btn-default">Calcular</button>
            </div>

            <div class="col-sm-3 align-self-center">
                <button  class="btn btn-default"  onclick="HTMLtoPDF()">Download PDF</button>
            </div>

            <form action="guardarArchivos.php" method="post" enctype="multipart/form-data">
            <div class="col-sm-3 align-self-center">
                <button class="btn btn-default" name="boton_guarda" value="Guardar en disco" onclick="javascript:document.execCommand('SaveAs','true','tu_archivo.txt')">Guardar</button>
            </div>
            </form>


        </div>
    </div>


    <!-- these js files are used for making PDF -->
    <script src="js/jspdf.js"></script>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/pdfFromHTML.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
4
  • Deberias de agregar tu codigo.
    – alanfcm
    Commented el 16 ago. 2018 a las 15:43
  • Edita tu pregunta y coloca el código en ella, no lo hagas como una respuesta porque por políticas de la comunidad lo pueden reportar. Te invito a dar un recorrido para que veas a detalle como funciona este sitio Commented el 16 ago. 2018 a las 16:04
  • Que columnas quieres que se sumen.
    – alanfcm
    Commented el 16 ago. 2018 a las 16:08
  • Banco de referencia, cheque y Terminal cac Commented el 16 ago. 2018 a las 16:14

1 respuesta 1

0

Te dejo un ejemplo con la primera columna(Banco de Referencia). Basicamente usas el evento blur para calcular el total. Tambien necesitas darle clases especificas a cada columna para poder saber que elementos vas a sumar. Quedaria algo asi:

<head>
    <title>HTML to PDF</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></script>
<script>
    $(document).ready(function(){
        $('#bt_add').click(function(){
            agregar();
        });
        $('#tabla').on('blur', 'tr', function() {
          $('#tabla').find('.total').remove();
          var banco = 0;
          $('#tabla .banco').each(function(i, td) {
            banco += parseFloat($(this).text());
          });
        
          var fila='<tr class="total"><td></td><td></td><td></td><td>' + banco + '</td><td ></td><td class="terminal"></td><td></td><td></td><td></td></tr>';
          $('#tabla').append(fila);
        });
    });
    var cont=0;
    var id_fila_selected=[];
    function agregar(){
        cont++;
        var fila='<tr contenteditable="true" id="fila"><td></td><td></td><td></td><td class="banco"></td><td class="cheque"></td><td class="terminal"></td><td></td><td></td><td></td></tr>';
        if($('#tabla .total')[0]) {
          $('#tabla .total').before(fila);
        } else {
          $('#tabla').append(fila);
        }
        //reordenar();
    }



</script>
</head>
<body >
<div  id="HTMLtoPDF">

    <div class="container">
        <div class="row justify-content-around">
            <div class="card-header text-center font-size:20% text-uppercase py-4" style="background: none">
                <h2 >PAGOS BANCARIOS</h2>
            </div>

        </div>
        <div id="content">


        <table  id="tabla" class="table table-bordered" >
        <thead>
        <tr>
                <td>RPE</td>
                <td>DIA DEPOSITO</td>
                <td>CARGA EN SICOM</td>
                <td>$ BANCO DE REFERENCIA</td>
                <td>$ CHEQUE</td>
                <td>$ TERMINAL CAC</td>
                <td>TIPO DE PAGO</td>
                <td>BANCO</td>
                <td>REFERENCIA/APROBACION</td>
            </tr>
        </thead>
    </table>

    </div>

    </div>

    </div>

    <!-- here we call the function that makes PDF -->
    <div class="container">
        <div class="row">

            <div class="col-sm-3 align-self-center">
                <button id="bt_add" class="btn btn-default">Agregar</button>
            </div>

            <div class="col-sm-3 align-self-center">
                <button id="bt_add" class="btn btn-default">Calcular</button>
            </div>

            <div class="col-sm-3 align-self-center">
                <button  class="btn btn-default"  onclick="HTMLtoPDF()">Download PDF</button>
            </div>

            <form action="guardarArchivos.php" method="post" enctype="multipart/form-data">
            <div class="col-sm-3 align-self-center">
                <button class="btn btn-default" name="boton_guarda" value="Guardar en disco" onclick="javascript:document.execCommand('SaveAs','true','tu_archivo.txt')">Guardar</button>
            </div>
            </form>


        </div>
    </div>


    <!-- these js files are used for making PDF -->
    <script src="js/jspdf.js"></script>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/pdfFromHTML.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

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.