0

我有一个如下所示的页面。其中一些数据来自数据库，并且在数据库数据旁边也会有表单字段。所有都是动态的，所以我们也需要对每个字段进行验证。

请检查这个http://jsbin.com/efinak/22/edit

Total Spent Cost: ((t1*100+t2*200)*x%+(t3*110)*y%)spent for A + spent for B

Client : A

product        No of Hours      Avg Rate/Hour       Cost
A1                  t1              100             t1*100
A2                  t2              200             t2*200

Total Cost:                                         t1*100+t2*200
Percentage(%):                                          x
Spent Cost:                                         (t1*100+t2*200)*x%

Client : B

product        No of Hours      Avg Rate/Hour       Cost
B1                  t3              110             t3*100


Total Cost:                                         t3*110
Percentage(%):                                        y
Spent Cost:                                         (t3*110)*y%

在上面的示例客户端中，产品和小时数将来自数据库。我为平均费率/小时保留了一个文本字段，还为成本保留了一个文本字段。

为什么我在问题中提到了 excel 的一种功能，我将在这里解释。如果假设我设置了 Avg Rate/Hour 文本字段，那么应该自动计算成本而无需任何重定向。同样，如果您设置成本平均费率/小时应自动计算。

一旦计算成本总成本应该自动计算。像上面的百分比也有一个文本字段，它也将由用户设置一些值。基于此，您需要计算花费的成本。

我需要为每个客户做这件事。一旦自动计算每个客户的花费成本，总花费成本也应该即时计算。

我需要想法，如果可能的话，需要更多帮助。

4

2 回答 2

1

如果每个客户端都有相同的聚合函数，则可以创建一个 javascript 类并将其附加到每个表，将计算绑定到输入字段的更改事件。

你可以制作一个像这样的 jquery 插件：（我还没有接近完成它，但它是一个开始）

您必须为每一行和每一项添加类，以便您在使用 jquery 的 dom 中更轻松地识别它，但最终它会变得更干净。

(function($){

   var Client = function(el){
       var $table = $(el);
     $.each($('.product-row'),function(row){
       var $row = $(row);
       //do the product total calculations here and bind it
     });
     $.each($('.total-row'),function(row){
       //bind your total calculation
     });
      //do this for discount and final rows also 


       $table.data('Client', this);
   };

   $.fn.client = function(){
      return this.each(function(){
         (new Client(this));
      });
   };


})(jQuery);

$(document).ready(function(){
 $('.client-table').client();
});
于 2013-01-21T06:59:24.733 回答
1

您可以为此使用 jquery 脚本。我举一个简短的例子，你可以从中了解这背后的基本逻辑。假设您有 4 个字段。A、B、C 和 D 具有适当的类名。

这里A和B来自数据库，C是输入字段，D是最终答案的输入字段。您可以按如下方式自动计算 D。

$(document).ready(function() {
     $('.class_C').live('change', function() {
          var A = $('.class_A').val();
          var B = $('.class_B').val();
          var C = $('.class_C').val();

          // Calculate D as per A, B and C.
          var D = A + B * C / 50;

          // Put new value in to D field.
          $('.class_D').val(D);
     });
})

编辑：：

检查：http: //jsbin.com/efinak/27/edit

$('input[name="quantity"]').change(function() {   
  var total = 0;
  $('input[name="price"]').map(function(i,n) {
    total += Number(n.value);
  });
  $('input[name="total"]').val(total);
});
于 2013-01-21T07:04:59.723 回答