使用 jQuery 实现动态输入项的价格与数量合计计算教程

<div class="form-group">
    <label class="control-label col-lg-4"></label>
    <div id="diva" class="col-lg-4">
        <div class="box">
            <header>
                <h5>تفاصيل الطلب</h5>
            </header>
            <div class="body getval"> <!-- 关键：用于标识一个商品行 -->
                <div class="form-group">
                    <label class="control-label col-lg-2">الصنف</label>
                    <div class="col-lg-10">
                        <select id="itemname" name="itemname[]" class="form-control">
                            <option disabled selected>اختر الصنف</option>
                            <?php echo getValues($pdo); ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">السعر</label>
                    <div class="col-lg-10">
                        <input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control price">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">الكمية</label>
                    <div class="col-lg-10">
                        <input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 总价显示字段，位于所有商品行之外 -->
    <input type="text" id="total" placeholder="-" readonly class="form-control">
</div>

<?php    
    require 'DBConnection.php'; // 数据库连接
    $code='';
    if(isset($_POST["code"])){
        $id = $_POST["code"];
        $get_c = $pdo->prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'");
        $get_c->execute(); 
        while ($row = $get_c->fetch()) {
            $code .= $row['price'];
        }
        echo $code.'.00'; // 输出价格
    }
?>

function calculateTotal() {
    let totalSum = 0.0;
    // 遍历所有具有 'body getval' 类的商品行容器
    $('.body.getval').each(function() {
        let $rowContainer = $(this); // 当前商品行容器
        // 获取价格，如果为空或无效则默认为0
        let price = parseFloat($rowContainer.find('.price').val() || 0);
        // 获取数量，如果为空或无效则默认为0
        let quantity = parseFloat($rowContainer.find('.quantity').val() || 0);

        // 确保价格和数量都是有效的数字，然后进行乘法运算
        if (!isNaN(price) && !isNaN(quantity)) {
            totalSum += price * quantity;
        }
    });
    // 更新总价输入框，并格式化为两位小数
    $('#total').val(totalSum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script>
$(document).ready(function(){
    var nextRowID = 0; // 用于为新行生成唯一ID

    // 1. 事件委托：监听所有（包括动态添加的）商品选择框的变化
    $(document).on('change', '[name="itemname[]"]', function(){
        var $currentItemSelect = $(this);
        var code = $currentItemSelect.val();
        // 找到当前行中的价格输入框
        var $priceInput = $currentItemSelect.closest('.body.getval').find('.price');

        // AJAX 请求获取商品价格
        $.ajax({
            type: 'POST',
            url: 'pages/GetPrice.php', // 你的PHP文件路径
            data:{code:code},
            success: function(data){
                $priceInput.val(data); // 更新价格
                calculateTotal(); // 价格更新后重新计算总价
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert("获取价格失败: " + errorThrown);
            }
        });
    });

    // 2. 事件委托：监听所有（包括动态添加的）数量输入框的变化
    $(document).on('change', '.quantity', function(){
        calculateTotal(); // 数量变化后重新计算总价
    });

    // 3. 核心计算函数：遍历所有商品行并计算总价
    function calculateTotal() {
        let totalSum = 0.0;
        // 遍历所有具有 'body getval' 类的商品行容器
        $('.body.getval').each(function() {
            let $rowContainer = $(this); // 当前商品行容器
            // 获取价格，如果为空或无效则默认为0
            let price = parseFloat($rowContainer.find('.price').val() || 0);
            // 获取数量，如果为空或无效则默认为0
            let quantity = parseFloat($rowContainer.find('.quantity').val() || 0);

            // 确保价格和数量都是有效的数字，然后进行乘法运算
            if (!isNaN(price) && !isNaN(quantity)) {
                totalSum += price * quantity;
            }
        });
        // 更新总价输入框，并格式化为两位小数
        $('#total').val(totalSum.toFixed(2));
    }

    // 4. 动态添加新行功能
    $('#add').click(function(e){
        e.preventDefault();
        var id = ++nextRowID;
        // 注意：这里生成的HTML片段应与初始HTML结构保持一致
        // 并且ID需要是唯一的，例如 'itemname'+id，但更推荐通过类名和DOM遍历来定位元素
        $('#append').append(
            '<div class="form-group">' +
                '<label class="control-label col-lg-4"></label>' +
                '<div id ="diva'+id+'" class="col-lg-4">' + // 确保ID唯一
                    '<div class="box">' +