如何用jQuery实现带行计算与总行总计的订单表单

Hey there! Let's get your order form working fully—we'll fix the row totals to multiply by the item price, and add the grand total calculation for all rows. Here's the updated code and breakdown:

First, Fix the HTML #

Notice your second item row was missing the total input field—we'll add that in so both rows can calculate their individual totals:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table name="tbl_a" id="tbl_a">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Wit</td>
      <td>Bruin</td>
      <td>Kaiser</td>
      <td>Pistolet wit</td>
      <td>Pistolet bruin</td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag puur</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
      <td class="q"><input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
      <td class="q"><input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
      <td><input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" style="width:160px;" /></td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"><input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"><input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td><input type="text" class="form-control total" name="at[total_2]" id="total_2_row" value="" placeholder="total" style="width:160px;" /></td>
    </tr>
  </tbody>
</table>
<!-- Grand total input -->
<input type="text" class="form-control grand-total" name="at[grand_total]" id="grand_total" value="" placeholder="Grand Total" style="width:160px; margin-top:10px;" />

Updated jQuery Code #

We'll adjust the calculateSum function to handle both row totals (with price multiplication) and the overall grand total:

(function($) {
  $(function() {
    var tbl = $('#tbl_a');
    
    // Bind keyup event to all text inputs in item rows
    tbl.find('tr.item input[type=text]').on("keyup", function() {
      calculateSum();
    });
    
    // Run calculation once on page load to initialize empty fields
    calculateSum();

    function calculateSum() {
      var tbl = $('#tbl_a');
      var grandTotal = 0;
      
      tbl.find('tr.item').each(function() {
        var sum = 0;
        // Get the price for this row (default to 0 if the value is invalid)
        var price = parseFloat($(this).find('.price').text()) || 0;
        
        // Sum all input values in the row (skip the total field itself)
        $(this).find('input[type=text]').not('.total').each(function() {
          if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
          }
        });
        
        // Calculate row total (sum of inputs multiplied by row price)
        var rowTotal = sum * price;
        $(this).find('.total').val(rowTotal.toFixed(2));
        
        // Add this row's total to the grand total
        grandTotal += rowTotal;
      });
      
      // Update the grand total input with the final sum
      $('#grand_total').val(grandTotal.toFixed(2));
    }
  });
})(jQuery);

Key Changes Explained #

• Row Total Fix: We now grab each row's .price value and multiply it by the sum of inputs in that row, which gives the correct line item total (previously you were just summing inputs without multiplying by price).
• Grand Total Calculation: We initialize a grandTotal variable, add each row's calculated total to it, then update the dedicated grand total input field at the end of the function.
• Page Load Initialization: Calling calculateSum() when the page loads ensures all total fields start with 0.00 instead of being empty.
• Targeted Event Binding: We narrowed the keyup event to only inputs inside tr.item rows, so we don't trigger calculations on the header row by accident.

内容的提问来源于stack exchange，提问作者devnew