Question

我想通过javascript添加单个列值

当用户输入数量而不是数量乘以价格列并显示在“您的帐单”列中。问题是，当用户点击订单按钮时，“您的帐单”列中的所有值都会添加并显示在屏幕上。

请告诉我如何汇总“您的帐单栏”

中的所有值

我的观看文件是

    <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

将类添加到“您的帐单”列的输入字段：

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

假设您的“订单”按钮的ID为“order-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);
    });
});

Answer 2

我认为这可行：

首先将新类设置为<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。

通过javascript列值的总和

2 个答案: