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:
- los precios son 10.1 o 10 o 10.24 y deseo mantener esa cantidad (sin redondear)
- 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