Jqueryフォームの計算が整列していない

Question

このjQueryの計算を自分のフォームで動作させようとしていますが、スニペットはうまく動作しますが、必要なフォームに転送すると、必要な計算を実行できません。

私が間違っている場所へのポインタ。

<script type="text/javascript" src="jquery-1.12.3.js"></script> 
    <script> 
    jQuery(function($) { 

    $(".Qty1, .TradePrice1").change(function() { 
     var total = 0; 
     $(".Qty1").each(function() { 
      var self = $(this), 
       TradePrice1 = self.next(".TradePrice1"), 
       subtotal = parseInt(self.val(), 10) * parseFloat(TradePrice1.val(), 10); 
      total += (subtotal || 0); 
     }); 
     $("#total1").val(total); 
    }); 

    }); 
    </script> 

    <tr> 
    <th><div align="center"> 
     <input type='text' name='F01u1' id='F01u1' /> 
    </th> 
    <td> 
     <input type='text' name='Model1' id='Model1' /> 
    </td> 
    <td> 
     <input type='text' name='Description1' id='Description1' /> 
    </td> 
    <td> 
     <input type="text" name='TradePrice1' id='TradePrice1' /> 
    </td> 
    <th> 
     <input type="text" name='Qty1' id='Qty1' /> 
    </th> 
    <td> 
     <input type='text' name='Total1' id='Total1' /> 
    </div></td> 
    </tr> 

Answer 1

コードにはかなりの問題があります。

• 入力には重複するid属性が無効です。代わりにクラスを使用する必要があります
• 余分なものがあります。div要素は必要ありませんが、適切に開いたり閉じたりしません。
• parseFloat()のみtotalフィールドがreadonlyないので、それは所望の任意の値に、誰でも修正することができる単一のパラメータ
• をとります。
• あなたのコードは、すべての行の合計を出し動作し、個々の行
• .TradePrice1の終わりにそれを置くので、それがすべてではnext()コール

から見つけることはありません.Qty1の兄弟ではありませんあなたのコードを大幅に改善することができます。デフォルト値は、デモの目的のために純粋であり、必要に応じて取り外すことができるという

$(".qty, .tradeprice").change(function() { 
 
    var total = 0; 
 
    $(".qty").each(function() { 
 
     var $qty = $(this), 
 
      $row = $qty.closest('tr'), 
 
      $tradePrice = $row.find('.tradeprice'), 
 
      $subtotal = $row.find('.subtotal'); 
 
     subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val()); 
 
     total += subtotal; 
 
     $subtotal.val(subtotal); 
 
    }); 
 
    $('.total').val(total); 
 
}).change();

input { 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <th> 
 
      <input type='text' name='F01u1' class='F01u1' /> 
 
     </th> 
 
     <td> 
 
      <input type='text' name='Model' class='model' /> 
 
     </td> 
 
     <td> 
 
      <input type='text' name='Description' class='description' /> 
 
     </td> 
 
     <td> 
 
      <input type="text" name='TradePrice' class='tradeprice' value="100" /> 
 
     </td> 
 
     <th> 
 
      <input type="text" name='Qty' class='qty' value="2" /> 
 
     </th> 
 
     <td> 
 
      <input type='text' name='Total' class='subtotal' readonly="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th> 
 
      <input type='text' name='F01u1' class='F01u1' /> 
 
     </th> 
 
     <td> 
 
      <input type='text' name='Model' class='model' /> 
 
     </td> 
 
     <td> 
 
      <input type='text' name='Description' class='description' /> 
 
     </td> 
 
     <td> 
 
      <input type="text" name='TradePrice' class='tradeprice' value="123" /> 
 
     </td> 
 
     <th> 
 
      <input type="text" name='Qty' class='qty' value="5" /> 
 
     </th> 
 
     <td> 
 
      <input type='text' name='Total' class='subtotal' readonly="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="6" align="right"> 
 
      Total: 
 

 
      <input type='text' name='Total' class='total' readonly="true" /> 
 
     </td> 
 
    </tr> 
 
</table>

注：これを試してみてください。