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

Question

我想添加表格顯示的所有總值。 之后，我必須計算表格的小計、折扣和總計。

例如，如果總計介於 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>

以及 function 的腳本

<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循環遍歷元素並將它們的值相加。 這是一個計算小計的示例。 我對 function 進行了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>