Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <!DOCTYPE html>
<html lang="en">

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <script type="text/javascript">
        // Refresca Producto: Refresco la Lista de Productos dentro de la Tabla
        // Si es vacia deshabilito el boton guardar para obligar a seleccionar al menos un producto al usuario
        // Sino habilito el boton Guardar para que pueda Guardar
        function RefrescaProducto() {
            var ip = [];
            var i = 0;
            $('#guardar').attr('disabled', 'disabled'); //Deshabilito el Boton Guardar
            $('.iProduct').each(function(index, element) {
                    id_pro: $(this).val()
            // Si la lista de Productos no es vacia Habilito el Boton Guardar
            if (i > 0) {
                $('#guardar').removeAttr('disabled', 'disabled');
            var ipt = JSON.stringify(ip); //Convierto la Lista de Productos a un JSON para procesarlo en tu controlador

        function agregarProducto() {

            var sel = $('#pro_id').find(':selected').val(); //Capturo el Value del Producto
            var text = $('#pro_id').find(':selected').text(); //Capturo el Nombre del Producto- Texto dentro del Select

            var sptext = text.split();

            var newtr = '<tr class="item"  data-id="'+sel+'">';
            newtr = newtr + '<td class="iProduct" >' + sel + '</td>';
            newtr = newtr + '<td><input class="form-control" type="text" id="cantidad[]" name="lista[]" onChange="Calcular(this);" value="1" /></td><td><input class="form-control" type="text" id="precunit[]" name="lista[]" onChange="Calcular(this);" value="0"/></td><td><input class="form-control" type="text" id="totalitem[]" name="lista[]" readonly /></td>';
            // Inicio: Esta línea la agregue que será el valor antes de modificar
            newtr = newtr + '<td style="display:none"><input class="form-control" type="text" id="totalitemold[]" name="listaold[]" value="0" /></td>';
            // Fin: Esta línea la agregue que será el valor antes de modificar
            newtr = newtr + '<td title="Eliminar"><button type="button" class="btn btn-danger btn-xs remove-item"><i class="fa fa-times"></i></button></td></tr>';

            $('#ProSelected').append(newtr); //Agrego el Producto al tbody de la Tabla con el id=ProSelected

            RefrescaProducto(); //Refresco Productos

            $('.remove-item').off().click(function(e) {
               // Restando del total el valor
            // Inicio: Esto se agrego
                var totalARestar=parseFloat($('input[type=text][readonly]', $(this).parent('td').parent('tr')).val()); 
               	$('#total').html(parseFloat($('#total').html()) - totalARestar);
            // Fin: Esto se agrego

                $(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
                if ($('#ProSelected tr.item').length == 0)
                    $('#ProSelected .no-item').slideDown(300);
            $('.iProduct').off().change(function(e) {

        function Calcular(ele) {
            var cantidad = 0, precunit = 0, totalitem = 0;
            var tr = ele.parentNode.parentNode;
            var nodes = tr.childNodes;
            // Inicio: Esto lo tenias casi al final
            // Resultado final de cada fila ERROR, al editar o eliminar una fila
            var total = document.getElementById("total");
            if (total.innerHTML == 'NaN') {
                total.innerHTML = 0;
            // Fin: Esto lo tenias casi al final
            for (var x = 0; x<nodes.length;x++) {
                if (nodes[x] == 'cantidad[]') {
                    cantidad = parseFloat(nodes[x].firstChild.value,10);
                if (nodes[x] == 'precunit[]') {
                    precunit = parseFloat(nodes[x].firstChild.value,10);
                if (nodes[x] == 'totalitem[]') {
                    totalitem = parseFloat((precunit*cantidad),10);
                    nodes[x].firstChild.value = totalitem;
            // Inicio: Esto se agrego
                if (nodes[x] == 'totalitemold[]') {
                  total.innerHTML = parseFloat(total.innerHTML)-parseFloat(nodes[x].firstChild.value,10); // Restamos lo anterior
                  nodes[x].firstChild.value=totalitem; //  Asumiendo no hay falla se coloca el nuevo valor de "if (nodes[x] == 'totalitem[]')", el cual será el "valor antes de modificar"
            // Fin: Esto se agrego
            total.innerHTML = parseFloat(total.innerHTML)+totalitem;    



    <div class="container">
            <h2>Comprar productos</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Agregar</button>
            <input type="hidden" id="ListaPro" name="ListaPro" value="" required />
            <table id="TablaPro" class="table">
                <tbody id="ProSelected">
                    <!--Ingreso un id al tbody-->

                        <td><span id="total">0</span> <input class="form-control" type="hidden" id="total_final" name="total_final"  value="0" readonly /></td>
            <!--Agregue un boton en caso de desear enviar los productos para ser procesados-->
            <div class="form-group">
                <button type="submit" id="guardar" name="guardar" class="btn btn-lg btn-default pull-right">Guardar</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">

            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Agregar producto a la lista</h4>
                    <div class="modal-body">
                        <div class="form-group">
                            <select class="selectpicker form-control" id="pro_id" name="pro_id" data-width='100%'>
                                        <option value="Lentes">Lentes</option>
                                        <option value="Casco">Casco</option>
                                        <option value="Gorra">Gorra</option>
                    <div class="modal-footer">
                        <!--Uso la funcion onclick para llamar a la funcion en javascript-->
                        <button type="button" onclick="agregarProducto()" class="btn btn-default" data-dismiss="modal">Agregar</button>