1

Buenos días amigos espero que me puedan ayudar, tengo la siguiente inquietud deseo realizar la misma función que tengo en JS pero utilizando JQUERY porque sino tendría que hacer una función JS para cada item

este es mi código:

<table>
    <th>usuario</th>
    <tr>
        <?php

            while ($usuarios=$resultado->fetch_assoc()) {

        ?>
            <td><input type="text" value='<?php echo"{$usuarios["admin"]}" ?>' readonly="readonly" id="valor"></td>
            <td><input type="number" id="cantidad"></td>
            <td><span id="res"></span></td>
            <!--<td><input type="submit" onclick="calcula()" value="calcula"></td>-->
            <td><button onclick="calcula()">Calcula</button></td>
    </tr>
    <?php } ?>
</table>

<script>
    function calcula(){
        var valor = document.getElementById('valor').value;
        var cantidad = document.getElementById('cantidad').value;
        var resultado = parseInt(valor)*parseInt(cantidad);
        //alert(resultado);
        document.getElementById("res").innerHTML = "el total de tu compra es: "+resultado+"$";
    }
</script>

En jquery intente hacer esto pero no me sale:

$(document).ready(function() {
    $("button").click(function() {
        $("#cantidad").$(this);
    });
});
2
  • 2
    Bienvenido a Stackoverflow. Quiero aclarar que esto es un error de interpretación: deseo realizar la misma función que tengo en JS pero utilizando JQUERY porque sino tendría que hacer una función JS para cada item. Lo que puedes hacer con jQuery es posible gracias a Javascript, pues jQuery no es más que una librería. Es más, hay cosas que son más simples en JS (si se aplican las prácticas adecuadas) y JS siempre es más rápido que jQuery. En youmightnotneedjquery hay varios ejemplos para desmontar el mito de que con jQuery es mejor y más facil.
    – A. Cedano
    Commented el 31 ene. 2019 a las 15:36
  • tanto jQuery como vanilla JS van a encontrar el primer ID (id="valor", id="cantidad", etc..), tendrías que asignarle una clase y opcionalmente un id diferente para cada uno. También sería posible filtrarlos por name si queres sacar un total global. Commented el 31 ene. 2019 a las 16:06

2 respuestas 2

2

Entiendo que lo que estás buscando es presentar una tabla con varias filas y en esas filas varios inputs, un span y un botón para hacer un cálculo sobre valores de los inputs en esa fila donde se encuentra el botón.

Dado que una eventual solución al problema ha hecho pensar que Javascript es insuficiente para eso, aporto esta solución hecha en Javascript puro. En comentarios del código he puesto lo fundamental (si tienes alguna duda puedes preguntar).

La clave aquí es agregar a cada button una clase, por ejemplo class="btnCalcular" para poder agrupas los botones que tengan esa clase y poder agregarle un listener que ejecutará el bloque de código que haya dentro. De hecho, es recomendable evitar poner llamadas a funciones in line en los elementos, porque hace que el código sea más difícil de mantener.

Además en tu código original incurres en prácticas no recomendadas como dar el mismo id a varios elementos. Dado que las filas de la tabla se crean en un bucle, iban a haber varios elementos con ids repetidos, lo cual es totalmente desaconsejado. En este caso yo evitaría poner id a los elementos y si los necesitaras para otra cosa, lo correcto es ponerle un id combinado con un contador, para que vaya cambiando en cada iteración del bucle.

Es más, verás que para obtener los datos no hace falta el id... el código planteado echa mano de la jerarquía que existe en el DOM para conocer primero la fila en la que se encuentra el botón que fue pulsado y a continuación cada celda en esa fila y los valores que hay en ella.

Queda claro que esto se puede hacer también con jQuery, pero ... youmightnotneedjquery !

Espero te sea de utilidad.

/*
  Seleccionamos todos los botones con la clase btnCalcula
*/
var allButtons = document.querySelectorAll('button.btnCalcula');

/*
  A todos esos botones le aplicamos la misma función
  Cualquiera de ellos que sea clickeado lanzará
  este bloque de código....
*/
allButtons.forEach(function(btn, index) {
  btn.addEventListener('click', function(e) {
    /*
      Ahora vamos a recuperar las celdas de la fila
      donde se encuentra el botón para sacar los valores
      y para cambiar el texto del span
    */
    var thisCells = event.target.parentNode.parentNode.cells;
    var valOne = thisCells[0].children[0].value;
    var valTwo = thisCells[1].children[0].value;
    var thisSpan = thisCells[2].children[0];
    var total = parseInt(valOne) * parseInt(valTwo);
    var txtSpan = `El total de tu compra es: ${total}$`;
    thisSpan.textContent = txtSpan;
    var cellTotal = document.getElementById('total');
    var currentTotal = parseInt(cellTotal.textContent) || 0;
    cellTotal.textContent = currentTotal + total;
  });
});
#total {
  background-color: #C8E6C9;
}
<table>
  <tr>
    <td><input type="text" value="10" readonly></td>
    <td><input type="number"></td>
    <td><span></span></td>
    <td><button class="btnCalcula">Calcula</button></td>
  </tr>
  <tr>
    <td><input type="text" value="5" readonly></td>
    <td><input type="number"></td>
    <td><span></span></td>
    <td><button class="btnCalcula">Calcula</button></td>
  </tr>
  <tr>
    <td>TOTAL:</td>
    <td id="total"></td>
    <td></td>
    <td></td>
  </tr>
</table>

4
  • muchas gracias por su ayuda A. Cedano, estoy empezando en este mundo de la programación y agradezco sus sugerencias.
    – Bryan
    Commented el 31 ene. 2019 a las 17:05
  • ahora bien ya me realiza el calculo y me aparece en cada etiqueta span, mi inquietud es como se puede realizar la suma de todos los span
    – Bryan
    Commented el 1 feb. 2019 a las 0:03
  • @Bryan revisa la nueva edición. He agregado un acumulador dentro de la función que irá sumando a una nueva celda con id="total" los nuevos valores. OJO: todo esto es muy básico, se requerirían otros tipos de controles, por ejemplo si alguien cambia un valor en uno de los inputs o algo así, pero meterse con todo eso ser iría bastante del problema inicial, porque según el contexto habrá varias formas de controlar eso... Lo dejo caer aquí para que lo tengas presente. Cuando se programa siempre hay que pensar que el usuario puede ejecutar acciones inesperadas.
    – A. Cedano
    Commented el 1 feb. 2019 a las 0:31
  • Mil gracias amigo A.Cedano por tu gentil ayuda, me ha sido de mucha ayuda en cosas que quizás sean simples pero poco a poco iré aprendiendo
    – Bryan
    Commented el 1 feb. 2019 a las 1:08
0

Supongo que la función que quieres convertir a Jquery es esta:

       function calcula(){
            var valor = document.getElementById('valor').value;
        var cantidad = document.getElementById('cantidad').value;
        var resultado = parseInt(valor)*parseInt(cantidad);
        //alert(resultado);
        document.getElementById("res").innerHTML = "el total de tu compra es: "+resultado+"$";
        }  

Este seria el resultado debes utilizar esta sintaxis para coger los valores por sus Id

   function calcula(){
      var valor = $("#valor").value;
      var cantidad = $("#cantidad").value;
      var resultado = parseInt(valor)*parseInt(cantidad);
      //alert(resultado);
      $("#res").text("el total de tu compra es: "+resultado+"$");
    }  

$("# + id") para los campos que seleccionas por ID

$(". + clase") para los campos que seleccionas por clase

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.