Сумма столбца значений с помощью Javascript

Question

Я хочу, чтобы добавить отдельные значения столбцов с помощью яваскрипта

, когда пользователь вводит количество, чем количество многократно с колонкой цены и показано в колонке «ваш счет». Проблема заключается в том, что когда пользователь нажимает кнопку «Заказать», все значения из столбца «Ваш счет» будут добавляться и отображаться на экране.

любезно скажите мне, как я могу суммировать все значения от 'вашего счета в столбце'

мой взгляд файл является

<tbody> 

<?php $i=0; foreach($result as $row){ 
?> 
    <tr> 
     <th class="item-lists"> 
      <?php echo $row->recipe_name;?> 
     </th> 
     <th class="pre-top"> 
      <?php echo $row->quantity;?> 
     </th> 
     <th class="pr-right"> 
      <span id="priceT<?php echo $i;?>" ><?php echo $row->price;?></span> 
     </th> 
     <th class="pr-right"> 

      <input type="text" class="container" value="" onfocus="this.value = '';" onblur=";}" style="width: 60px" id="quantityT<?php echo $i;?>" onkeyup="CalculatePrice (<?php echo $i;?>)"> 
     </th> 

     <th class="clearfix"> 
      <input type="text" class="container" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" style="width: 60px"id="TPrice<?php echo $i;?>"> 
     </th> 
    </tr> 
<?php 
$i++; 
} ?> 
    </tbody> 

и код Javascript

function CalculatePrice (id) { 


     var startP = parseInt (document.getElementById ("priceT"+id).innerHTML); 
     var startQ = parseInt (document.getElementById ("quantityT"+id).value); 

     var Bill = 0; 
     if (!isNaN (startP)&&!isNaN(startQ)) 
     {var Bill = startP * startQ} 


     document.getElementById ("TPrice"+id).value = Bill; 



    } 

Answer 1

Я думаю, что это может сработать:

Сначала установите новый класс на <th class="clearfix"> как ... <th class="clearfix product-price"> и добавьте data-price к вашим входам с ценой (по соображениям безопасности пользователь может изменить значение входного текста).

Затем с JavaScript:

var order = document.getElementById('order'); 
var totalPrice = 0; 

order.addEventListener('click', function(){ 
    var productsPrice = document.getElementsByClassName('product-price'); 
    console.log(productsPrice); 
    for(var i = 0; i < productsPrice.length; i++){ 
     totalPrice += parseInt(productsPrice[i].dataset.price); 
    } 
    alert("Total = "+totalPrice); 
}); 

Я сделал fiddle.

Лично я использовал span вместо текста input по причине, о которой я говорил ранее.

Answer 2

Добавить класс для полей ввода столбца «Ваш счет»:

<input type="text" class="container row-total" value="" /> 

Предполагая, что ваша кнопка "Заказать" имеет идентификатор "заказ-BTN":

<button id="order-btn">Order</button> 

Используйте слушателя и рассчитать общее:

document.getElementById('order-btn').addEventListener('click',function(){ 
    var rowTotals = document.getElementsByClassName('row-total'); 
    var orderTotal = 0; 
    for(var i = 0; i < rowTotals.length; i++){ 
     orderTotal += parseFloat(rowTotals[i].value); 
    } 
    alert(orderTotal); 
}); 

альтернатива JQuery:

$(function(){ 
    $('#order-btn').click(function(){ 
     var orderTotal = 0; 
     $('.row-total').each(function(){ 
       orderTotal += parseFloat($(this).val()); 
     }); 
     alert(orderTotal); 
    }); 
});