0

tengo una tabla con 2 select (producto,cantidad) y al momento de cambiar de producto o cantidad los multiplica y me genera un subtotal, lo que yo deseo es que al momento de cambiar cualquiera de los dos me sume todos los subtotales activos.

table,  td{
border:1px solid red;
}
<table>
<thead>
<th>Plato</th>
<th>Cantidad</th>
<th>Sub-total</th>
</thead>
<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>

<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>

<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>

<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>

<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>

<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>

<tr>
<td>
<select name="plato">
<option  data-precio="20">Plato 1</option>
<option  data-precio="20.50">Plato 2</option>
<option  data-precio="20.3">Plato 3</option>
<option  data-precio="20.10">Plato 4</option>
</select>
</td>
<td>
<select name="cantidad">
<option>10</option>
<option>20</option>
</td>
<td>30.00 (Subtotal)</td>
</tr>


</table>

<div>Aca deberia aparecerme la suma de todos los subtotales</div>

no puse el jquery porque el codigo html de esta tabla es solo de ejemplo.

en concreto lo que deseo es que al cambiar algun select(plato,cantidad) me recorra todos los select (plato) activos y me multiplique data-precio (plato) * cantidad dandome como resultado el subtotal y luego me sume todos los subtotales.

Observaciones:

  1. los precios son 10.1 o 10 o 10.24 y deseo mantener esa cantidad (sin redondear)
  2. transformar el resultado a 11.11 es decir si el resultado es 10 que me muestre 10.00 y si es 10.2 que me muestre 10.20

1 respuesta 1

0

Algo como esto debería funcionar. Simplemente añado un evento change a cada select en la tabla desde javascript, igual puede asignarse desde jquery, y obtiene todos los registros de la tabla, en cada registro saca los valores de precio y cantidad y hace el calculo.

document.addEventListener('DOMContentLoaded', () => {

    var selects = document.querySelectorAll('#tablaprueba select');
    for (let selectplato of selects) {
        selectplato.addEventListener('change', calcular);
    }
    sumaSubtotales();


});


function calcular(e) {
    sumaSubtotales();
}

function sumaSubtotales() {
    var Sumasubtotal = 0;
    let tabla = document.getElementById('tablaprueba');
    for (const row of tabla.rows) {
        let subtotal = 0;
        let selectplato = row.querySelector('.plato')
        let selectantida = row.querySelector('.cantidad')
        if (selectplato && selectantida) {
            let precio = selectplato.selectedOptions[0].dataset.precio || 0;
            let cantidad = selectantida.value || 0;
            subtotal = parseFloat(precio) * parseFloat(cantidad);
            row.cells[2].innerHTML = '';
            row.cells[2].innerHTML = `${subtotal} (Subtotal)`;
        }
        Sumasubtotal += subtotal;
    }
    document.getElementById('Subtotal').innerHTML = `${Sumasubtotal}`
}
<table id="tablaprueba">
        <thead>
            <th>Plato</th>
            <th>Cantidad</th>
            <th>Sub-total</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>
                    30.00 (Subtotal)
                </td>
            </tr>

            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>
                    30.00 (Subtotal)
                </td>
            </tr>

            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>30.00 (Subtotal)</td>
            </tr>

            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>30.00 (Subtotal)</td>
            </tr>

            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>30.00 (Subtotal)</td>
            </tr>

            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>30.00 (Subtotal)</td>
            </tr>

            <tr>
                <td>
                    <select name="plato" class="plato">
                        <option data-precio="20">Plato 1</option>
                        <option data-precio="20.50">Plato 2</option>
                        <option data-precio="20.3">Plato 3</option>
                        <option data-precio="20.10">Plato 4</option>
                    </select>
                </td>
                <td>
                    <select name="cantidad" class="cantidad">
                        <option>10</option>
                        <option>20</option>
                    </select>
                </td>
                <td>30.00 (Subtotal)</td>
            </tr>
        </tbody>
    </table>

    <div id="Subtotal">Aca deberia aparecerme la suma de todos los subtotales</div>

1
  • Excelente, gracias amigo.
    – IntruzO
    Commented el 10 oct. 2020 a las 2:32

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.