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

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

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

下面是我写的东西：

// 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都是动态创建的，所以不起作用。我已经尝试设置一个新的$（'表'）。on（'change'，function（）{}）但没有奏效。有人能指引我朝着正确的方向吗？

非常感谢

来源

2013-11-25 WagnerMatosUK

如果页面从未刷新您可以使用JavaScript全局变量和最多一个被调升每次你需要它的时候。全局可以在整个JavaScript文件中使用。

来源

2013-11-25 12:30:13 CaptainCarl

初始化您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; 

    });

来源

2013-11-25 12:31:36

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

回答

相关问题