使用JavaScript获取每个的价值

问题描述 投票:0回答:2

我是JavaScript新手。我需要获取选中行的值$ {prdcts.precioUnidad}。想法是以动态方式设置总价,因此当用户选中或取消选中每行时,total的值要么在选中时添加新值,要么在未选中时减去前一个值。

我试图使用getElement()方法获取值,但我不知道如何访问该特定行中变量的值。

这是HTML:

<html><head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>Ventas</title>
   </head>
   <body>
   <center><h1>Venta de Productos</h1>
       <form action="venta.htm" method="post">
           <table id="tableID" border="4">
               <tbody><tr>
                   <th>ID</th>
                   <th>Nombre</th>
                   <th>Valor</th>
                   <th>Comprado</th>
               </tr>

                   <tr>
                       <td>2</td>
                       <td>Chupetin</td>
                       <td>5.0</td>
                       <td><input name="check" type="checkbox" value="2" label="2" path="prdcts"></td>                               
                   </tr>

                   <tr>
                       <td>3</td>
                       <td>Alfajor DDL</td>
                       <td>30.0</td>
                       <td><input name="check" type="checkbox" value="3" label="3" path="prdcts"></td>                               
                   </tr>

                   <tr>
                       <td>4</td>
                       <td>Sanguche Mila</td>
                       <td>60.0</td>
                       <td><input name="check" type="checkbox" value="4" label="4" path="prdcts"></td>                               
                   </tr>

           </tbody></table>
           <br>
           <br>
           <br>
           <table border="4">
               <tbody><tr>
                   <td>Total Compra: <input name="total" id="total" type="number" readonly="" value="0"></td>
               </tr>
               <tr>
                   <td>Monto Pagado: <input name="monto" id="monto" type="number" value="0"></td>
               </tr>
               <tr>
                   <td>Vuelto: <input name="vuelto" id="vuelto" type="number" readonly="" value="0"></td>
               </tr>
               <tr>
                   <td><input name="begin" onclick="calcularVuelto()" type="button" value="Calcular Vuelto"></td>
               </tr>
           </tbody></table>
           <br>
           <br>
           <input name="clear" onclick="window.location.href = 'venta.htm'" type="button" value="Borrar venta">
           <input name="begin" onclick="window.location.href = 'principal.htm'" type="button" value="Inicio">
           <input name="confirm" type="submit" value="Confirmar Venta">
           <br>
       </form>     
   </center>    


<script>

// Make it an Array with "Array.from" so we can use reduce() on it
   var $$checkboxes = Array.from(document.querySelectorAll('input[name=check]')),
           $total = document.getElementById('total');

// For each checkbox
   $$checkboxes.forEach(function ($checkbox) {
       // When its value changes, update total
       $checkbox.addEventListener('change', updateTotal);
   });




   function updateTotal() {
       // For each checkbox
       alert("aca");
       var total = $$checkboxes.reduce(function (sum, $checkbox) {
           // If it's checked
           alert("aca2")
           if ($checkbox.checked) {
               var price = $checkbox.parentNode.parentNode // parent <tr>
                       .querySelectorAll('td')[2].innerText.trim(); // remove spaces

               // Add price to the sum
               return sum + parseFloat(price);
           } else {
               // If it's not checked, just return the current sum
               return sum;
           }
       }, 0);
       $total.value = total.toFixed(2); // Always 2 decimals
   }

   function calcularVuelto() {

       var total = document.getElementById("total").value;
       var pago = document.getElementById("monto").value;
       var fTotal = parseFloat(total);
       var fPago = parseFloat(pago);
       totalResta = fPago - fTotal;
       document.getElementById("vuelto").value = totalResta;
   }
</script>

</body></html>
javascript
2个回答
1
投票

您可以使用Array.prototype.reduce()计算总数:


0
投票

选中的标志是打开还是关闭。不用争论。所以看起来像

© www.soinside.com 2019 - 2024. All rights reserved.