0

Tengo una tabla HTML en la que quiero realizar operaciones matematicas, pero no se llega a ejecutar el código.

function formula() {
var cantidad = document.mytable.cantidad.value;
var precio_unitario = document.mytable.precio_unitario.value;
var iva = document.mytable.iva.value;
 try{
  cantidad = (isNaN(parseInt(cantidad)))? 0 : parseInt(cantidad);
  iva = (isNaN(parseInt(iva)))? 0 : parseInt(iva);
  precio_unitario = (isNaN(parseInt(precio_unitario)))? 0 : parseInt(precio_unitario);
  total = (isNaN(parseInt(total)))? 0 : parseInt(total);

  document.mytable.total.value = (cantidad*iva*precio_unitario);
}
catch(e) {}
}


<table name="mytable" id="mytable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th width="5%">Cantidad</th>
            <th width="18%">Descripción del artículo</th>
            <th width="5%">Precio Unitario</th>
            <th width="5%">%DTO</th>
            <th width="5%">IVA</th>
            <th width="7%">Precio Total</th>
            <th width="12%">Inspección de recepción</th>
            <th width="12%">Comentarios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" id="cantidad" name="cantidad" class="form-control" onKeyUp="formula()"></td>
            <td><input type="text" id="artiuclo" name="articulo" class="form-control">
          </td>
          <td><input type="text" id="precio_unitario" name="precio_unitario" class="form-control" onKeyUp="formula()"></td>
          <td><input type="text" id="descuento_porcentaje" name="descuento_porcentaje" class="form-control"></td>
          <td><input type="text" id="iva" name="iva" class="form-control">
       </td>
       <td><input type="text" id="precio_total" name="precio_total" class="form-control" onKeyUp="formula()">
     </td>
     <td><input type="text" id="inspeccion" name="inspeccion" class="form-control"></td>
     <td><input type="text" id="comentarios" name="comentarios" class="form-control"></td>
     </tr>
      <th>Total</th>
<td><input type="text" id="total" name="total" class="form-control"></td>
</tbody>
</table> 

https://jsfiddle.net/cqLg2mh7/13/

3
  • Estas usando algún tipo de Framework de Javascript? No se puede acceder a elementos con document.mytable etc... en Javascript nativo. el 2 ago. 2017 a las 9:36
  • No, solo tengo funciones ajax. el 2 ago. 2017 a las 9:38
  • Te dejo una respuesta entonces sobre como tendrías que hacerlo. el 2 ago. 2017 a las 9:39

2 respuestas 2

2

He adaptado el código:

       <!DOCTYPE html>
<html>
<body>

<table id="mytable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th width="5%">Cantidad</th>
            <th width="18%">Descripción del artículo</th>
            <th width="5%">Precio Unitario</th>
            <th width="5%">%DTO</th>
            <th width="5%">IVA</th>
            <th width="7%">Precio Total</th>
            <th width="12%">Inspección de recepción</th>
            <th width="12%">Comentarios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="number" id="cantidad" name="cantidad" class="form-control" onKeyUp="formula()"></td>
            <td><input type="text" id="artiuclo" name="articulo" class="form-control">
          </td>
          <td><input type="number" id="precio_unitario" name="precio_unitario" class="form-control" onKeyUp="formula()"></td>
          <td><input type="text" id="descuento_porcentaje" name="descuento_porcentaje" class="form-control"></td>
          <td><input type="number" id="iva" name="iva" class="form-control">
       </td>
       <td><input type="number" id="precio_total" name="precio_total" class="form-control" onKeyUp="formula()">
     </td>
     <td><input type="text" id="inspeccion" name="inspeccion" class="form-control"></td>
     <td><input type="text" id="comentarios" name="comentarios" class="form-control"></td>
     </tr>
      <th>Total</th>
<td><input type="number" id="total" name="total" class="form-control"></td>
</tbody>
</table> 

<script>
function formula() {
 var cantidad = document.getElementById('cantidad').value;
 var precio_unitario = document.getElementById('precio_unitario').value;
 var iva = document.getElementById('iva').value;    

      document.getElementById('total').value = (cantidad*iva*precio_unitario);
 }
</script>

</body>
</html>

Prueba y comenta

EDITADO: Código editado, cambiado algunos inputs tipo text por number

4
  • jsfiddle.net/cqLg2mh7/32 Aquí mismo lo tienes pero no rellena el campo total el 2 ago. 2017 a las 9:58
  • Esa solución si funciona perfectamente. Pruebala en local, en lugar de JSFiddle. Si bien, yo cambiaría el tipo de input por "number" para no tener que estar comprobando si es texto o número. el 2 ago. 2017 a las 10:00
  • Tienes razón @DaniAguado, Ahora lo edito para que quede mejor. Gracias
    – Edu3D
    el 2 ago. 2017 a las 10:03
  • Además, creo que lo que él quiere es que se rellene el campo total del final de la fila (precio_total), no el de abajo... debería confirmarnoslo. De ese modo, luego deberían sumarse todos los inputs de esa columna para sacar el total... pero eso ya es otra historia. el 2 ago. 2017 a las 10:06
0

En Javascript nativo no puedes acceder a los elementos del DOM como lo estas intentando, con document.mytable.cantidad.value

Tienes que acceder de la siguiente forma:

document.getElementById('cantidad').value

Tienes otros métodos para acceder aquí: https://www.w3schools.com/js/js_htmldom_elements.asp

Además, tienes una variable no definida en la función formula(), precio.

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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