0

Mi problema es que ya obtuve los valores de una resta y los valores de una suma. Ahora lo que quiero es restar esos resultados pero no he podido hacerlo.

Dejo mi código por si alguien puede colaborarme.

Código:

function resta() {
  var res = 0;
  var contador = 0;
  $('.cl').each(function() {
    if (!isNaN($(this).val())) {
      res -= Number($(this).val());
      if (res < 0) {
        res = res * -1;
      }
      valor = "$ " + res;
      return contador = 1;
    }
  });
  $('#restall').val(valor);
};

function suma() {
  var add = 0;
  //contador = 1;
  $('.cla').each(function() {
    if (!isNaN($(this).val())) {
      add += Number($(this).val());
      if (add < 0) {
        add = add * -1;
      }

      valor1 = "$ " + add;
    }
  });
  $('#sumaall').val(valor1);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>

    <td class="tg-1wig" colspan="4">valor resta1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="TIOEP" onChange="resta();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor resta2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="MIFM" onChange="resta();" />
    </td>
  </tr>
  <tr>

    <!-- aca resto el valor1 y el valor 2-->
    <td class="tg-1wig" colspan="4">TOTAL resta
      <td class="tg-0lax" colspan="3">
        <input id="restall" class="form-control" onChange="restadetodo();" type="text" name="restatodo" value="" />
      </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text3" class="cla form-control" type="text" name="MIDRD" onChange="suma();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text4" class="cla form-control" type="text" name="MIPE" onChange="suma();" />
    </td>
  </tr>

  <tr>

    <td class="tg-0lax" colspan="4">valor suma3</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text5" class="cla form-control" type="text" name="MIPAENSAO" onChange="suma();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma4</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text6" class="cla form-control" type="text" name="MIOAEEMPA" onChange="suma();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">TOTAL suma</td>
    <td class="tg-0lax" colspan="3">
      <input id="sumaall" class="form-control" type="text" value="" />
    </td>
  </tr>
</table>




<table>
  <tr>

    <td class="tg-1wig" colspan="4">valor resta1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="TIOEP" onChange="resta();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor resta2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="MIFM" onChange="resta();" />
    </td>
  </tr>
  <tr>

    <!-- aca resto el valor1 y el valor 2-->
    <td class="tg-1wig" colspan="4">TOTAL resta
      <td class="tg-0lax" colspan="3">
        <input id="restall" class="form-control" onChange="restadetodo();" type="text" name="restatodo" value="" />
      </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text3" class="cla form-control" type="text" name="MIDRD" onChange="suma();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text4" class="cla form-control" type="text" name="MIPE" onChange="suma();" />
    </td>
  </tr>

  <tr>

    <td class="tg-0lax" colspan="4">valor suma3</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text5" class="cla form-control" type="text" name="MIPAENSAO" onChange="suma();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma4</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text6" class="cla form-control" type="text" name="MIOAEEMPA" onChange="suma();" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">TOTAL suma</td>
    <td class="tg-0lax" colspan="3">
      <input id="sumaall" class="form-control" type="text" value="" />
    </td>
  </tr>
</table>

Utilicé código que encontré en este mismo sitio y me funcionó, pero la verdad no he logrado hacer la resta de los valores finales.

2
  • No se entiende muy bien, tienes abajo otra tabla, quieres que ahí también se sume o reste independiente de la de arriba? el 15 dic. 2020 a las 2:11
  • quisiera hacerlo si es posible que en el ultimo campo se resten los valores, es decir el valor de la resta menos el valor de la suma el 16 dic. 2020 a las 16:19

1 respuesta 1

0

La función restadetodo no existía, así que la quito... Para que la función pueda ubicar en qué tabla se está escribiendo los números, primero hay que agregar el parámetro this en el onchange... También se puede agregar un onkeyup.

onchange="resta(this);" onkeyup="resta(this);"

El parámetro this es el elemento actual. Por ejemplo:

<input
    id="Text2"
    class="cl form-control"
    type="text"
    name="TIOEP"
    onchange="resta(this);"
    onkeyup="resta(this);"
/>

En este caso, el this, es el elemento que corresponde a la etiqueta input en que se está escribiendo el número. Este parámetro es para buscar la tabla padre más cercana, es decir, la etiqueta table.

En jQuery, para buscar la tabla padre más cercana, se hace mediante el método closest:

var tabla = $(x).closest("table")

Una vez encontrada la tabla padre, se buscan todos los input de dicha tabla, es decir, las entradas.

var entradas = tabla.find("input")

En la resta, se busca el primer y segundo input y se le resta el segundo al primero. El primero se hace mediante .get(0) y el segundo mediante .get(1):

var valor = (
    $(entradas.get(0)).val()
    -$(entradas.get(1)).val()
)

En la suma, partimos el array de entradas, desde la posición 3, hasta la 7 (no inclusive)... Vemos que 7 restado 3 es 4, que es la cantidad de entradas. Se va sumando al total el valor de cada entrada, mediante el método each.

var valor = 0
entradas.slice(3,7).each( (a,b)=>{
  valor += +$(b).val()
})

Como se ve en el código anterior, la función que se le pasa al each tiene dos parámetros, en este caso los nombramos a y b... Nos interesa más el b, para obtener el valor de la entrada, aunque también se puede con a, que es el índice.

Para formatearlo a pesos, puede hacerse de varias maneras, preferentemente el signo pesos a la derecha del signo de resta:

("$"+valor).replace("$-","-$")

Si se quiere el signo de resta a la derecha del signo pesos, no hay que hacer el replace.

Código completo:

function resta(x) {
  var tabla = $(x).closest("table")
  var entradas = tabla.find("input")

  var valor = (
      $(entradas.get(0)).val()
      -$(entradas.get(1)).val()
  )

  tabla.find('#restall').val(
    ("$"+valor).replace("$-","-$")
  )
};

function suma(x) {
  var tabla = $(x).closest("table")
  var entradas = tabla.find("input")
  
  var valor = 0
  entradas.slice(3,7).each( (a,b)=>{
    valor += +$(b).val()
  })

  tabla.find('#sumaall').val(
    ("$"+valor).replace("$-","-$")
  )
};
#sumaall, #restall{
  background: #80808070
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="1">
  <tr>

    <td class="tg-1wig" colspan="4">valor resta1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="TIOEP" onchange="resta(this);" onkeyup="resta(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor resta2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="MIFM" onchange="resta(this);" onkeyup="resta(this);" />
    </td>
  </tr>
  <tr>

    <!-- aca resto el valor1 y el valor 2-->
    <td class="tg-1wig" colspan="4">TOTAL resta
      <td class="tg-0lax" colspan="3">
        <input id="restall" class="form-control" type="text" name="restatodo" value="" />
      </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text3" class="cla form-control" type="text" name="MIDRD" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text4" class="cla form-control" type="text" name="MIPE" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>

  <tr>

    <td class="tg-0lax" colspan="4">valor suma3</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text5" class="cla form-control" type="text" name="MIPAENSAO" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma4</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text6" class="cla form-control" type="text" name="MIOAEEMPA" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">TOTAL suma</td>
    <td class="tg-0lax" colspan="3">
      <input id="sumaall" class="form-control" type="text" value="" />
    </td>
  </tr>
</table>

<br/>

<table border="2" >
  <tr>

    <td class="tg-1wig" colspan="4">valor resta1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="TIOEP" onchange="resta(this);" onkeyup="resta(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor resta2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text2" class="cl form-control" type="text" name="MIFM" onchange="resta(this);" onkeyup="resta(this);" />
    </td>
  </tr>
  <tr>

    <!-- aca resto el valor1 y el valor 2-->
    <td class="tg-1wig" colspan="4">TOTAL resta
      <td class="tg-0lax" colspan="3">
        <input id="restall" class="form-control" type="text" name="restatodo" value="" />
      </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma1</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text3" class="cla form-control" type="text" name="MIDRD" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma2</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text4" class="cla form-control" type="text" name="MIPE" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>

  <tr>

    <td class="tg-0lax" colspan="4">valor suma3</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text5" class="cla form-control" type="text" name="MIPAENSAO" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">valor suma4</td>
    <td class="tg-0lax" colspan="3">
      <input id="Text6" class="cla form-control" type="text" name="MIOAEEMPA" onchange="suma(this);" onkeyup="suma(this);" />
    </td>
  </tr>
  <tr>

    <td class="tg-0lax" colspan="4">TOTAL suma</td>
    <td class="tg-0lax" colspan="3">
      <input id="sumaall" class="form-control" type="text" value="" />
    </td>
  </tr>
</table>

Tu Respuesta

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

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