動的フィールド - 合計を加算する

Question

私はこの作業を行う方法を見つけようとしていますが、その結果として「NaN」に近づいています。

私は、次の表を持っている：

 <table border="1" class="autoTable"> 

    <tr><td><input name="description[]" id="description" value="<?php echo $description; ?>" size="55" onKeyPress="return disableEnterKey(event)" /> 
    </td><td align="center"><input type="checkbox" name="stocked[]" id="stocked" value="<?php echo $stocked; ?>" size="5" onKeyPress="return disableEnterKey(event)" /> 
    </td><td><input name="quantity[]" id="quantity" value="<?php echo $quantity; ?>" size="5" onKeyPress="return disableEnterKey(event)" /> 
    </td><td><input name="partPrice[]" id="partPrice" value="<?php echo $partPrice; ?>" size="10" onKeyPress="return disableEnterKey(event)" /> 
    </td><td><input name="hours[]" id="hours" value="<?php echo $hours; ?>" size="10" onKeyPress="return disableEnterKey(event)" /> 
    </td><td><select name="rate[]" id="rate" onKeyPress="return disableEnterKey(event)"> 
    <?php 
     //Connect to mysql db and retrieve the rate options 
    ?> 
    </select> 
    </td><td><!--<span class="amount"></span>--><input name="total[]" id="total" size="10" class="amount" onKeyPress="return disableEnterKey(event)" /> 
    </td><td align="center"><input type="checkbox" name="approved[]" id="approved" value="<?php echo $approved; ?>" size="10" onKeyPress="return disableEnterKey(event)" /> 
    </td><td align="center"><img src="img/plus.png" width="25" height="25" id="addButton" title="Add New Row" class="addRow" /> 
    </td><td align="center"><img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" /> 
    </td></tr> 
    </table> 

私がやりたいことは、合計フィールドは（データベースのフォームに引っ張られ、選択にリストされている）量x partPriceプラス時間×率を表示しています。私はこれを動的に行い、オンザフライで更新する方が好きです。 AddボタンとRemoveボタンがあるので、必要なだけ多くの行を追加できます。

また、ページの下部に合計を表示したいと思いますが、「承認済み」をクリックすると各行を追加するだけです。

 $('#hours').blur(function() { 
     $('tr').each(function(){ 
      var total = 0; 
      total = parseFloat($(this).find('input[name=quantity]').val()); 
      $(this).find('.amount').val(parseFloat(total)); 
     }); 
    }); 

はこれがNaNレンダリングし、私は非常に私が間違ってやっているかを把握することはできません：私がやろうとしてきた何

は、少なくとも一時的にこのjqueryのです。私は承認チェックボックス、または最終合計に進んでいない。

さらに、quantity、price、およびhoursフィールドに数字を打ち込む前に動的行を追加すると、NaNが各合計に表示されます。これは、配列を指定していないため、class = "amount"（すべての合計）のすべてのフィールドを使用しているためです。

私のできることは、送信ボタンを使用することです。すべてのフィールドの値を取得するので、データベースの入力には問題はありませんが、合計を動的に計算することができます。

私は洞察と援助を感謝します。

おかげ

Answer 1

変更するには、この行...

total = parseFloat($(this).find('input[name=quantity]').val()); 

...へ...

total = parseFloat($(this).find('input[name=quantity]').val()) || 0; 

そうでない場合は、空の文字列にparseFloat()はNaNが生成されます。 NaNは毒性があり、数学のどこにいても常にNaNになります。

内側のループの外側にtotalを宣言し、最後（ループの外側）にのみ値を設定する必要があります。

Answer 2

試してみてください。

 
var total = 0; 
$('tr').each(function(){ 

      total += parseFloat($(this).find('input[name=quantity[]]').val()); 
      $(this).find('.amount').val(parseFloat(total)); 
     }); 

が、それは私がNaNを避けるために「|| 0」のアレックスの提案を含め、これを試してみましたが、残念ながら、私は合計で任意の値が届かない