基于Bootstrap、jQuery实现表单表格行总计与分项合计需求咨询

Got it, let's tackle this form calculation step by step. Here's a complete implementation using Bootstrap for styling and jQuery for the calculation logic:

1. 优化后的HTML结构 #

First, we'll wrap your form inputs into a proper Bootstrap table and add a footer row for total summaries:

<div class="container mt-4">
  <table class="table table-bordered" id="subTable">
    <thead>
      <tr>
        <th>Amount</th>
        <th>Tax</th>
        <th>Deduction</th>
        <th>Pure Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input name="sub[0][amount]" value="" placeholder="amount" class="form-control calc-input" type="text"></td>
        <td><input name="sub[0][tax]" value="" placeholder="tax" class="form-control calc-input" type="text"></td>
        <td><input name="sub[0][deduction]" value="" placeholder="deduction" class="form-control calc-input" type="text"></td>
        <td><p class="form-control-static pure-amount">0.00</p></td>
      </tr>
      <tr>
        <td><input name="sub[1][amount]" value="" placeholder="amount" class="form-control calc-input" type="text"></td>
        <td><input name="sub[1][tax]" value="" placeholder="tax" class="form-control calc-input" type="text"></td>
        <td><input name="sub[1][deduction]" value="" placeholder="deduction" class="form-control calc-input" type="text"></td>
        <td><p class="form-control-static pure-amount">0.00</p></td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
    <tfoot class="bg-light">
      <tr>
        <td><strong>Total Amount: <span id="total-amount">0.00</span></strong></td>
        <td><strong>Total Tax: <span id="total-tax">0.00</span></strong></td>
        <td><strong>Total Deduction: <span id="total-deduction">0.00</span></strong></td>
        <td><strong>Total Pure Amount: <span id="total-pure">0.00</span></strong></td>
      </tr>
    </tfoot>
  </table>
</div>

Quick notes on the HTML: #

• Added calc-input class to all editable fields for easy event listening
• Added pure-amount class to static pure amount elements for targeted updates
• Used Bootstrap's table classes (table-bordered, bg-light) for clean styling
• Added a footer row to display all category totals

2. jQuery Calculation Logic #

Here's the core script to handle real-time row calculations and total summaries:

$(document).ready(function() {
  // Core calculation function
  function calculateAll() {
    let totalAmount = 0;
    let totalTax = 0;
    let totalDeduction = 0;
    let totalPure = 0;

    // Loop through each data row
    $('#subTable tbody tr').each(function() {
      const $row = $(this);
      // Parse input values (default to 0 if empty or non-numeric)
      const amount = parseFloat($row.find('input[name*="amount"]').val()) || 0;
      const tax = parseFloat($row.find('input[name*="tax"]').val()) || 0;
      const deduction = parseFloat($row.find('input[name*="deduction"]').val()) || 0;

      // Calculate pure amount for the row
      const pureAmount = amount - tax - deduction;
      // Update row's pure amount display (2 decimal places for currency)
      $row.find('.pure-amount').text(pureAmount.toFixed(2));

      // Accumulate totals
      totalAmount += amount;
      totalTax += tax;
      totalDeduction += deduction;
      totalPure += pureAmount;
    });

    // Update footer totals
    $('#total-amount').text(totalAmount.toFixed(2));
    $('#total-tax').text(totalTax.toFixed(2));
    $('#total-deduction').text(totalDeduction.toFixed(2));
    $('#total-pure').text(totalPure.toFixed(2));
  }

  // Trigger calculation on input change or typing
  $('.calc-input').on('input change', function() {
    calculateAll();
  });

  // Run initial calculation on page load
  calculateAll();
});

3. Key Features Explained #

• Real-time Updates: Listens to both input (typing) and change (blur) events to recalculate instantly
• Error Handling: Uses || 0 to convert empty/non-numeric inputs to 0, avoiding NaN errors
• Currency Precision: toFixed(2) ensures all values display with 2 decimal places, standard for financial data
• Scalability: If you need to add rows dynamically, just make sure new rows use the same calc-input and pure-amount classes — the script will automatically include them in calculations

4. Required Dependencies #

Don't forget to include Bootstrap and jQuery in your page:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Bootstrap JS (only if you need Bootstrap interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

This setup will give you exactly what you need: row-level pure amount calculations, individual row data display, and total summaries for all categories. Let me know if you need help adding dynamic row addition/removal functionality too!

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