Jquery Form Calculation nicht ausrichtend

Question

Ich habe versucht, diese jQuery Mathe mit meinem Formular arbeiten, die ich das Schnipsel gut funktionieren, aber wenn ich auf das erforderliche Formular übertrage kann ich es nicht ausgerichtet, um die Mathematik erforderlich auszuführen.

irgendwelche Hinweise darauf, wo ich falsch liege.

<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

Sie haben einige Probleme in Ihrem Code.

• Die Eingänge haben doppelte id Attribute, die ungültig sind. Sie sollten stattdessen Klassen verwenden
• Sie haben einige äußere div Elemente, die neben nicht benötigt werden, sind nicht richtig geöffnet oder geschlossen.
• parseFloat() nimmt nur einen einzigen Parameter
• die total Feld nicht readonly so kann sie von jedermann geändert werden, auf einen beliebigen Wert gewünscht ist.
• Ihr Code funktioniert die Summe für alle Zeilen aus und legt sie am Ende jeder einzelnen Zeile
• .TradePrice1 ist kein Geschwister von .Qty1 daher wird es nie von einem next() Anruf

Mit allen finden In diesem Sinne können Sie Ihren Code massiv verbessern. Versuchen Sie folgendes:

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

Beachten Sie, dass die Standardwerte lediglich zu Demonstrationszwecken und können entfernt werden, wenn nötig.