Question

基本上我正在创建一个像表这样的订单，其中每个项目都动态地添加到表中。一旦一个项目（一个带有几个tds的tr元素）被添加到表格中，就会有一个$('table').on('change', 'td.qty-class', function(){}来更新该特定元素的价值（带价格的td）。

如何使用jQuery将每个（即使更新后的tr）的总值添加到总计中？

这是我写的：

// When click on button, add the product
$productBTN.click(function() {

        var prod = {};

        prod.name = $(this).children('.productName').text(),
        prod.price = parseInt($(this).children('.productPrice').text().replace( /^\D+/g, '')),
        prod.unitPrice = parseInt($(this).children('.productPrice').text().replace( /^\D+/g, '')),
        prod.id = Utils.fnGenerateUUID();

        $('table.order-list tbody').append(
            '<tr class="product_class ' + prod.name + '" id="' + prod.id + '">' +
                '<td>' +
                '<select class="form-control product-qty input-sm">' +
                '<option>1</option>' +
                '<option>2</option>' +
                '<option>3</option>' +
                '<option>4</option>' +
                '<option>5</option>' +
                '<option>6</option>' +
                '<option>7</option>' +
                '<option>8</option>' +
                '<option>9</option>' +
                '</select>' +
                '</td>' +
                '<td><button class="btn btn-danger btn-xs">Delete</button></td>' +
                '<td>' + prod.name + '</td>' +
                '<td><button class="btn btn-xs btn-primary">Note</button></td>' +
                '<td class="unit-price hidden">£ ' + prod.price + '</td>' +
                '<td class="prd-price">£ ' + prod.price + '</td>' +
                '</tr>'
        );

        // Add the product to a order object
        order.products[prod.id] = prod;

        // Change the price on the table when quantity changes
        $('table.order-list').on('change', '.product-qty', function() {

            var $prrd = $(this).parents('.product_class');
            $prrd.id = $(this).parents('.product_class').attr('id');
            $prrd.price = $(this).parents('.product_class').find('.prd-price').text().replace( /^\D+/g, '');
            $prrd.unitPrice = $(this).parents('.product_class').find('.unit-price').text().replace( /^\D+/g, '');
            $prrd.qty = $(this).val();

            $prrd.find('.prd-price').html('£ ' + $prrd.qty * $prrd.unitPrice);

            order.products[$prrd.id].price = $prrd.qty * $prrd.unitPrice;

        });

    });

但是现在我不确定如何继续以获得总数：我考虑循环遍历每个tr并获得价格td的值，但是因为每个tr都是动态创建的，但是没有用。我已经尝试设置一个新的$（'table'）。on（'change'，function（）{}）但是没有用。有人能指出我正确的方向吗？

非常感谢

Answer 1

如果页面永远不会刷新，则可以使用Javascript全局变量，并在每次需要升级时使用该变量。全局可以在整个Javascript文件中使用。

Answer 2

在js的开头初始化变量：

window.totalValue = 0;

在您的更改功能上添加：

window.totalValue = window.totalValue + (parseFloat($prrd.qty) * parseFloat($prrd.unitPrice));

成为该职能：

    $('table.order-list').on('change', '.product-qty', function() {

        var $prrd = $(this).parents('.product_class');
        $prrd.id = $(this).parents('.product_class').attr('id');
        $prrd.price = $(this).parents('.product_class').find('.prd-price').text().replace( /^\D+/g, '');
        $prrd.unitPrice = $(this).parents('.product_class').find('.unit-price').text().replace( /^\D+/g, '');
        $prrd.qty = $(this).val();

        window.totalValue = window.totalValue + (parseFloat($prrd.qty) * parseFloat($prrd.unitPrice));

        $prrd.find('.prd-price').html('£ ' + $prrd.qty * $prrd.unitPrice);

        order.products[$prrd.id].price = $prrd.qty * $prrd.unitPrice;

    });

如何在动态创建的tr标记表中添加总计

2 个答案: