« anterior próximo »
Páginas: [1]

Autor Tema: JavaScript jQuery Recacular total con array al efectuar OnClick="Delete" button  (Leído 4987 veces)

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
JavaScript jQuery Recacular total con array al efectuar OnClick="Delete" button
« en: 03 de Enero 2017, 16:06 »
Código: [Seleccionar]
<script type="text/javascript">
$( document ).ready(function() {
    $( "input, textarea" ).focus(function() {
        $( "input, textarea" ).next( ".info" ).hide();
        $( this ).next( ".info" ).show();
    }); 
});

function AddItem() {
var tbody = null;
var tabla = document.getElementById("tabla");
var nodes = tabla.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].nodeName == 'TBODY') {
tbody = nodes[x];
break;
}
}
if (tbody != null) {
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="text" name="Numero[]"/></td><td><input type="text" name="Codigo Catalogo[]"/></td><td><input type="text" name="Descripcion[]"/></td><td><input type="text" name="UM[]"/></td><td><input type="text" name="cantidad[]" onChange="Calcular(this);" value="1" /></td><td><input type="text" name="precunit[]" onChange="Calcular(this);" value="0"/></td><td><input type="text" name="totalitem[]" readonly /></td><td><button type="button" value="Delete Row" onClick="Deletebtn(this); ReCalcular(this);" class="btn btn-danger delete"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></td>';

tbody.appendChild(tr);
}
}

function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'precunit[]') {
precunit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'totalitem[]') {
totalitem = parseFloat((precunit*cantidad),10);
nodes[x].firstChild.value = totalitem;
}
}
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}

function Deletebtn(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

//ESTA PARTE YA NO FUNCIONA
function ReCalcular(ele){
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
}

</script>
</head>
<body>

<div class="container">
<form class="form-horizontal" method="post" title="Bienes solicitados">
<!-- ACA INICIA MI CODIGO -->

<div class="panel panel-default">
    <div class="panel-body"><b>BIENES Y SERVICIOS SOLICITADOS:</b>
    <hr>
    <div class="form-group">
<div class="col-md-12">
            <div class="row">
<div class="col-md-12" align="center">
            <form name="frmitems" id="frmitems">
<div id="contenedor">
<table id="tabla" class="col-md-12">
<thead>
<!-- HEADER DE LAS COLUMNAS -->
<tr>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Numero</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Codigo Catalogo</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Descripcion</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">UM</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Cantidad</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Precio Unitario</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Total</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon"></th>
</tr>
</thead>
<tbody>
<!-- ACA SE AUTO INCREMENTAN LAS CELDAS -->
</tbody>

<tfoot>
<!-- FOOTER DE LA TABLA -->
</tfoot>
</table>
<hr>
<div>
<button type="button" onClick="AddItem();" class="btn btn-success" id="agregar-renglon" align="center"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true" align="center"></span></button>
</div>
</form>

            <div class="input-group">
                <div class="input-group-addon"><p>$
                <span id="total"> 0</span></p>
                </div>
            </div>
            <p></p>
            <textarea class="form-control" rows="1" placeholder=""></textarea>
            <div class="info" align="left">
            <p>» (01) Consignar los datos respecto a del bien/servicio según figura en el catálogo SIByS. Este requisito es obligatorio para los requerimientos.</p>
            <p>» (02) Consignar la moneda y el valor total de la solicitud de gastos en letras. Ej. PESOS CUARENTA Y CINCO MIL CON 00/100.</p>
            </div>
            </div>
            </form>
            </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- PRINT PDF -->
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12" align="center">
    <a class="btn btn-primary"><span class="glyphicon glyphicon-print"></span></a></button>
    </div>
</div>
</div>
</body>
</html>
« Última modificación: 16 de Febrero 2017, 21:57 por Alex Rodríguez »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #1 en: 03 de Enero 2017, 17:24 »
Hola debybrusc.


¿Podrías explicar cual es tu duda de una forma un poco mas clara?

No entiendo muy bien lo que necesitas.

Y si pudieras completar el código que falta, pues mejor.

Saludos. ;D
En línea

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #2 en: 03 de Enero 2017, 17:37 »
Código: [Seleccionar]

function ReCalcular(ele){
alert('hola!');

//HASTA EL ALERT REALIZA TODO!
//ME FALTA HACER EL ARRAY Q RECORRA LOS ELEMENTOS POR CLASS 'TOTALITEM' Y ME SUME TODOS LOS INPUTS Q EL MISMO ARROJA!

//var total = document.getElementsByClass("totalitem");
//for( i = 0; i <= totalitem.length; i++){


//if (total.innerHTML == 'NaN') {
// total.innerHTML = 0;
//}
//total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #3 en: 03 de Enero 2017, 19:43 »
Sigo sin saber que es lo que el código debe de hacer, pero en lo poco que muestras en esa última función, no es "getElementsByClass", sino "getElementsByClassName", esto lo puedes ver abriendo la consola del navegador, donde te dará un error.

Además de eso intentas guardar en la variable "total" los elementos que pertenezcan a la clase "totalitem" y en todo el código que pegaste no hay ni un solo elemento que tenga como clase "totalitem", así que la variable "total" no contendrá ningún elemento y no se ejecutará el "for" de esta función.

Saludos. ;D
En línea

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #4 en: 03 de Enero 2017, 19:48 »
Perdon! Soy nueva en esto!!!
Hay una parte del codigo q se ve q no se copio... falta la parte cuando me carga los td de la tabla (uno de esos td tiene la class 'total item').

En un ratito ingreso y copio el codigo completo!
Muchas gracias!!!!
En línea

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #5 en: 03 de Enero 2017, 22:02 »
Código: [Seleccionar]
<script>
$( document ).ready(function() {
    $( "input, textarea" ).focus(function() {
        $( "input, textarea" ).next( ".info" ).hide();
        $( this ).next( ".info" ).show();
    }); 
});
</script>
<script type="text/javascript">

function AddItem() {
var tbody = null;
var tabla = document.getElementById("tabla");
var nodes = tabla.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].nodeName == 'TBODY') {
tbody = nodes[x];
break;
}
}
if (tbody != null) {
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="text" name="Numero[]"/></td><td><input type="text" name="Codigo Catalogo[]"/></td><td><input type="text" name="Descripcion[]"/></td><td><input type="text" name="UM[]"/></td><td><input type="text" name="cantidad[]" onChange="Calcular(this);" value="1" /></td><td><input type="text" name="precunit[]" onChange="Calcular(this);" value="0"/></td><td><input type="text" name="totalitem[]" class="totalitem" readonly /></td><td><button type="button" value="Delete Row" onClick="Deletebtn(this); ReCalcular(this);" class="btn btn-danger delete"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></td>';
//ACA DEFINO AL TD LA CLASS "TOTAL ITEM"
tbody.appendChild(tr);
}
}

function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'precunit[]') {
precunit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'totalitem[]') {
totalitem = parseFloat((precunit*cantidad),10);
nodes[x].firstChild.value = totalitem;
}
}
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}

</script>
<script type="text/javascript">

function Deletebtn(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

//ESTA PARTE NO REALIZA LO Q QUIERO = SUMAR TODOS LOS DATOS Q TOMA CON UN ARRAY DE LA COLUMNA TOTAL DE CLASS "TOTAL ITEM"
function ReCalcular(ele){
alert('hola!');
</script>
</head>
<body>

<div class="container">
<form class="form-horizontal" method="post" title="Bienes solicitados">
<!-- ACA INICIA MI CODIGO -->

<div class="panel panel-default">
    <div class="panel-body"><b>BIENES Y SERVICIOS SOLICITADOS:</b>
    <hr>
    <div class="form-group">
<div class="col-md-12">
            <div class="row">
<div class="col-md-12" align="center">
            <form name="frmitems" id="frmitems">
<div id="contenedor">
<table id="tabla" class="col-md-12">
<thead>
<!-- HEADER DE LAS COLUMNAS -->
<tr>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Numero</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Codigo Catalogo</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Descripcion</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">UM</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Cantidad</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Precio Unitario</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon">Total</th>
<th class="col-md-8 col-xs-6 col-md-4 input-group-addon"></th>
</tr>
</thead>
<tbody>
<!-- ACA SE AUTO INCREMENTAN LAS CELDAS -->
</tbody>

<tfoot>
<!-- FOOTER DE LA TABLA -->
</tfoot>
</table>
<hr>
<div>
<button type="button" onClick="AddItem();" class="btn btn-success" id="agregar-renglon" align="center"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true" align="center"></span></button>
</div>
</form>

            <div class="input-group">
                <div class="input-group-addon"><p>$
                <span id="total"> 0</span></p>
                </div>
            </div>
            <p></p>
            <textarea class="form-control" rows="1" placeholder=""></textarea>
            <div class="info" align="left">
            <p>» (01) Consignar los datos respecto a del bien/servicio según figura en el catálogo SIByS. Este requisito es obligatorio para los requerimientos.</p>
            <p>» (02) Consignar la moneda y el valor total de la solicitud de gastos en letras. Ej. PESOS CUARENTA Y CINCO MIL CON 00/100.</p>
            </div>
            </div>
            </form>
            </div>
            </div>
            </div>
            </div>
    </div>
    </div>

</form>
</div>
</body>
</html>

En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #6 en: 04 de Enero 2017, 00:19 »
Prueba con esto:

Código: [Seleccionar]
function ReCalcular(ele){
var nodoTotalItem = document.getElementsByClassName('totalitem');
var suma = 0;
for(var i = 0; i < nodoTotalItem.length; i ++) {
suma += Number(nodoTotalItem[i].value);
}
alert(suma);
}
Ten en cuenta que la fila en la que pulsas el botón, la elimina, por lo cual no se tiene en cuenta a la hora de calcular la suma de los elementos que tienen como clase "totalitem".

Saludos. ;D
En línea

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #7 en: 04 de Enero 2017, 00:40 »
Con el codigo como me lo enviaste no efectua ningun cambio, es decir! solo me pone un alert q es igual a Nan.

Modifique el codigo:

Código: [Seleccionar]
function ReCalcular(ele){
        var totalitem = document.getElementsByClassName('totalitem');
        var suma = 0;
        for(var i = 0; i < totalitem.length; i ++) {
                suma += Number(totalitem[i].value);
       
        if (total.innerHTML == 'NaN') {
        total.innerHTML = 0;
        }
        total.innerHTML = parseFloat(total.innerHTML)+totalitem;
    }
}

        //SIGUE SIN EFECTUAR EL CALCULO

Te pongo una captura del error!
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #8 en: 04 de Enero 2017, 01:25 »
La variable total no contiene nada, añade esta línea en esa función:

Código: [Seleccionar]
var total = document.getElementById('total');
En línea

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #9 en: 04 de Enero 2017, 01:28 »
Asi decis?

Código: [Seleccionar]
function ReCalcular(ele){
        var totalitem = document.getElementsByClassName('totalitem');
        var total = document.getElementById('total');
        var suma = 0;
        for(var i = 0; i < totalitem.length; i ++) {
                suma += Number(totalitem[i].value);
       
        if (total.innerHTML == 'NaN') {
        total.innerHTML = 0;
        }
        total.innerHTML = parseFloat(total.innerHTML)+totalitem;
    }
}

Sigue iguaaal!  :'(
Tengo un merengue en la cabeza ya!
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #10 en: 04 de Enero 2017, 02:00 »
Código: [Seleccionar]
function ReCalcular(ele){
        var totalitem = document.getElementsByClassName('totalitem');
        var total = document.getElementById('total');
        var suma = 0;
        for(var i = 0; i < totalitem.length; i ++) {
                suma += Number(totalitem[i].value);
    }
    total.innerHTML = suma;
}
Si no te he entendido mal es eso lo que debe de hacer la función, sumar todos los elementos que tengan como clase "totalitem".

En línea

debybrusc

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Re:Recacular total con array al efectuar OnClick="Delete" button
« Respuesta #11 en: 04 de Enero 2017, 13:48 »
Si!!! Ahora siiii!!!
MUCHAS GRACIAS PEDRO!!!  :) :) :)
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".