支持多面额动态配置的表格输入金额自动计算功能开发需求

Got it, let's break this down into a clean, maintainable solution that handles dynamic denominations and real-time calculations—perfect for your cash register coin tracking needs.

Core Approach #

The key is building a config-driven system so you can add/remove denominations in seconds without rewriting core logic. We'll centralize all coin details in a single data structure, then bind real-time calculation logic to each input field.

Step-by-Step Implementation #

1. Define Your Denomination Configuration #

First, create a centralized config object for all your coins. This is where you'll add new denominations later—no code changes needed elsewhere:

const coinConfig = [
  { id: 'penny', label: '£0.01', value: 0.01 },
  { id: 'twoPence', label: '£0.02', value: 0.02 },
  { id: 'fiftyPence', label: '£0.50', value: 0.50 },
  { id: 'pound', label: '£1.00', value: 1.00 },
  { id: 'twoPound', label: '£2.00', value: 2.00 }
];

2. Generate the Dynamic Table #

Instead of hardcoding table rows, generate them from the config. This ensures consistency and makes scaling trivial:

<table id="cashRegisterTable">
  <thead>
    <tr>
      <th>Denomination</th>
      <th>Quantity in Register</th>
      <th>Total Amount</th>
    </tr>
  </thead>
  <tbody id="coinTableBody">
    <!-- Dynamic rows will populate here -->
  </tbody>
</table>

const tableBody = document.getElementById('coinTableBody');

// Populate table from config
coinConfig.forEach(coin => {
  const row = document.createElement('tr');
  
  row.innerHTML = `
    <td>${coin.label}</td>
    <td><input type="number" min="0" id="${coin.id}-input" class="quantity-input" data-denomination="${coin.value}"></td>
    <td id="${coin.id}-total">£0.00</td>
  `;
  
  tableBody.appendChild(row);
  
  // Attach calculation listener to each input
  const input = row.querySelector('.quantity-input');
  input.addEventListener('input', updateCoinTotal);
});

3. Real-Time Calculation Logic #

Write a reusable function that handles the math whenever a user types in a quantity. It uses the data-denomination attribute to pull the coin's value, so no hardcoded values in the logic:

function updateCoinTotal(e) {
  const input = e.target;
  const quantity = parseInt(input.value) || 0; // Default to 0 if input is empty
  const denomination = parseFloat(input.dataset.denomination);
  const total = quantity * denomination;
  
  // Update the corresponding total cell with proper currency formatting
  const totalCell = document.getElementById(`${input.id.replace('-input', '')}-total`);
  totalCell.textContent = `£${total.toFixed(2)}`;
}

Key Features That Meet Your Requirements #

• Dynamic Configuration: Add new coins by just adding a new entry to coinConfig—no changes to calculation logic needed.
• Real-Time Updates: The total for each denomination updates instantly as the user types.
• Robust Handling: Defaults to 0 for empty inputs, uses toFixed(2) to ensure consistent currency formatting.
• Scalable: Works with any number of denominations, from £0.01 up to any higher value you add.

Bonus: Grand Total of All Coins (Optional) #

If you want a running total of all coins in the register, add this snippet to calculate and display it:

function updateGrandTotal() {
  let grandTotal = 0;
  document.querySelectorAll('.quantity-input').forEach(input => {
    const quantity = parseInt(input.value) || 0;
    const denomination = parseFloat(input.dataset.denomination);
    grandTotal += quantity * denomination;
  });
  
  document.getElementById('grandTotal').textContent = `£${grandTotal.toFixed(2)}`;
}

// Add a footer row for grand total
const footer = document.createElement('tfoot');
footer.innerHTML = `
  <tr>
    <td colspan="2"><strong>Total Cash in Register</strong></td>
    <td id="grandTotal">£0.00</td>
  </tr>
`;
document.getElementById('cashRegisterTable').appendChild(footer);

// Update grand total whenever any input changes
document.querySelectorAll('.quantity-input').forEach(input => {
  input.addEventListener('input', updateGrandTotal);
});

This solution is clean, easy to maintain, and exactly fits your use case—tweak the config to add new denominations in seconds without touching the core logic.

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