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%

上記の例のクライアントでは、製品と時間数はデータベースから取得されます。平均レート/時間のテキストフィールドとコストのテキストフィールドも保持しました。

質問で私が優れた機能性について言及した理由は、ここで説明します。平均レート/時間のテキストフィールドを設定した場合、リダイレクトせずに自動的にコストを計算する必要があります。同様に、コストを設定した場合、平均レート/時間は自動的に計算されます。

コストが計算されたら、合計コストを自動的に計算する必要があります。上記のように、パーセンテージには、ユーザーが何らかの値を設定するテキストフィールドもあります。これに基づいて、使用済みコストを計算する必要があります。

私はすべてのクレインのためにこれをする必要があります。すべてのクレインの使用済みコストが自動的に計算された後、合計使用済みコストもその場で計算する必要があります。

アイデアが必要で、可能であればもっと助けが必要です。

4

2 に答える 2

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 に答える
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 に答える