如何使用javascript添加元素类的所有值?

克里斯蒂安孔特雷拉斯

我想添加表格显示的所有总值。之后,我必须计算表格的小计、折扣和总计。

例如,如果总计介于 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章