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的到底是不是.Qty1兄弟，因此它永遠不會從next()通話

被發現與所有記住你可以大幅度提高你的代碼。試試這個：

$(".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>

注意，默認值是純粹用於演示目的，並且可以在需要時刪除。