我想添加表格显示的所有总值。之后,我必须计算表格的小计、折扣和总计。
例如,如果总计介于 150.000 和 299.999 之间,则可享受 3% 的折扣。
这是我的代码:
<table id="tb">
<td>1</td>
<td>Shampoo de Zeolita</td>
<td><input type="text" class="precio" name="precio1" value="3500" style="color: black; background: transparent; border: 0; text-align: center;" readonly=""></td>
<td><input type="number" class="cantidad" min="0" name="cantidad1" placeholder="0"></td>
<td><input type="text" class="total" name="total1" placeholder="0"></td>
<tr></tr>
<td>2</td>
<td>Shampoo de Almendras</td>
<td><input type="text" class="precio" name="precio2" value="3500" style="color: black; background: transparent; border: 0; text-align: center;" readonly=""></td>
<td><input type="number" class="cantidad" min="0" name="cantidad2" placeholder="0"></td>
<td><input type="text" class="total" name="total2" placeholder="0"></td>
<tr></tr>
<td>3</td>
<td>Shampoo de Manzanilla</td>
<td><input type="text" class="precio" name="precio3" value="7000" style="color: black; background: transparent; border: 0; text-align: center;" readonly=""></td>
<td><input type="number" class="cantidad" min="0" name="cantidad3" placeholder="0"></td>
<td><input type="text" class="total" name="total3" placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Subtotal</td>
<td><input type="text" class="subtotal" name="total3" placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Descuento</td>
<td><input type="text" class="descuento" name="total3" placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Total</td>
<td><input type="text" class="totales" name="total3" placeholder="0"></td>
</table>
和函数的脚本
<script>
document.getElementById("tb").addEventListener("input", function(e) {
const parent = e.target.closest("tr");
const precio = parent.querySelector('[class=precio]').value;
const cantidad = parent.querySelector('[class=cantidad]').value;
const total = precio * cantidad;
parent.querySelector('[class=total]').value = total;
// var subtotal, var descuento y var totales son las que no puedo calcular
});
</script>
您可以使用querySelectorAll
获取具有特定类的所有元素,然后使用for
循环来循环遍历元素并将它们的值相加。这是一个计算小计的示例。我做subtotal
了一个函数,这样你就可以自己引用元素,而不必被迫将数字分配给文本框。
document.getElementById("tb").addEventListener("input", function(e) {
const parent = e.target.closest("tr");
const precio = parent.querySelector('[class=precio]').value;
const cantidad = parent.querySelector('[class=cantidad]').value;
const total = precio * cantidad;
parent.querySelector('[class=total]').value = total;
// var subtotal, var descuento y var totales son las que no puedo calcular
document.querySelector(".subtotal").value = subtotal();
});
function subtotal(){
var subtotal = 0;
for(var x=0;x<document.querySelectorAll(".total").length;x++){
subtotal += Number(document.querySelectorAll(".total")[x].value);
}
return subtotal;
}
<table id="tb">
<td>1</td>
<td>Shampoo de Zeolita</td>
<td><input type="text" class="precio" name="precio1" value="3500" style="color: black; background: transparent; border: 0; text-align: center;" readonly=""></td>
<td><input type="number" class="cantidad" min="0" name="cantidad1" placeholder="0"></td>
<td><input type="text" class="total" name="total1" placeholder="0"></td>
<tr></tr>
<td>2</td>
<td>Shampoo de Almendras</td>
<td><input type="text" class="precio" name="precio2" value="3500" style="color: black; background: transparent; border: 0; text-align: center;" readonly=""></td>
<td><input type="number" class="cantidad" min="0" name="cantidad2" placeholder="0"></td>
<td><input type="text" class="total" name="total2" placeholder="0"></td>
<tr></tr>
<td>3</td>
<td>Shampoo de Manzanilla</td>
<td><input type="text" class="precio" name="precio3" value="7000" style="color: black; background: transparent; border: 0; text-align: center;" readonly=""></td>
<td><input type="number" class="cantidad" min="0" name="cantidad3" placeholder="0"></td>
<td><input type="text" class="total" name="total3" placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Subtotal</td>
<td><input type="text" class="subtotal" name="total3" placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Descuento</td>
<td><input type="text" class="descuento" name="total3" placeholder="0"></td>
<tr></tr>
<td colspan="4" align="right">Total</td>
<td><input type="text" class="totales" name="total3" placeholder="0"></td>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句