如何在動態創建的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標籤表中添加總計

回答

相關問題