如何通过 javascript 元素的 class 添加所有值？

Question

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

例如，如果总价在 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>

Answer 1

您可以使用 querySelectorAll 获取具有特定 class 的所有元素，然后使用 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>

Answer 2

嗯，谢谢你的回复，对我帮助很大

我完成了我需要的代码这是：

<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="subtotal" id="subtotal" readonly placeholder="0"></td>
    <tr></tr>
    <td colspan="4" align="right">Descuento %<input type="text" id="discount" class="discount" style="color: black; background: transparent; border: 0; text-align: center; width: 20px;" value="0"></td>
    <td><input type="text" class="descuento" class="descuento" name="descuento" id="descuento" readonly placeholder="0"></td>
    <tr></tr>
    <td colspan="4" align="right">Total</td>
    <td><input type="text" class="totales" id="totales" name="totales" readonly 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;
        document.querySelector('[class=subtotal]').value = subtotal();
        document.querySelector('[class=discount]').value = discount();
        document.querySelector('[class=descuento]').value = dscto();
        document.querySelector('[class=totales]').value = totalfinal();

    });

    function subtotal(){
        var subtotal = 0;
        for(var x=0;x<document.querySelectorAll(".total").length;x++){
            subtotal += Number(document.querySelectorAll(".total")[x].value);
        }
        return subtotal;
    }


    function discount(){
        var subtotal = Number(document.getElementById("subtotal").value);
        var discount = 0;
        if(subtotal > 150000 && subtotal < 299999){
            discount = 3;
        }
        if(subtotal > 300000 && subtotal < 449999){
            discount = 4;
        }
        if(subtotal > 450000){
            discount = 5;
        }

        return discount;
    }
    function dscto(){
        var subtotal = Number(document.getElementById("subtotal").value);
        var descuento = 0;
        if(subtotal > 150000 && subtotal < 299999){
            descuento = subtotal * 0.03;
        }
        if(subtotal > 300000 && subtotal < 449999){
            descuento = subtotal * 0.04;
        }
        if(subtotal > 450000){
            descuento = subtotal * 0.05;
        }

        return descuento;
    }



    function totalfinal(){
        var subtotal2 = Number(document.getElementById("subtotal").value);
        var descuento2 = Number(document.getElementById("descuento").value);

        var totales = subtotal2 - descuento2;
        return totales;
    }


</script>

如何通过 javascript 元素的 class 添加所有值？

How can I add all the values by the class of the element with javascript?

html

javascript

class

function

add