HTML内置金额计算表格实现求助：输入钞票数自动算金额

直接给你一套可运行的完整代码，包含表格布局和自动计算逻辑，刚接触HTML也能看懂：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>钞票金额计算器</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px 12px;
            text-align: center;
        }
        th {
            background-color: #f5f5f5;
        }
        input[type="number"] {
            width: 60px;
            padding: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>面额（元）</th>
                <th>数量</th>
                <th>对应金额（元）</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td><input type="number" class="count" data-denomination="100" value="0"></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>50</td>
                <td><input type="number" class="count" data-denomination="50" value="0"></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>20</td>
                <td><input type="number" class="count" data-denomination="20" value="0"></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>10</td>
                <td><input type="number" class="count" data-denomination="10" value="0"></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>5</td>
                <td><input type="number" class="count" data-denomination="5" value="0"></td>
                <td class="amount">0</td>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="number" class="count" data-denomination="1" value="0"></td>
                <td class="amount">0</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2">总金额</th>
                <th id="total">0</th>
            </tr>
        </tfoot>
    </table>

    <script>
        // 获取所有数量输入框
        const countInputs = document.querySelectorAll('.count');
        
        // 给每个输入框绑定输入事件，内容变化时自动计算
        countInputs.forEach(input => {
            input.addEventListener('input', calculateAmount);
        });

        function calculateAmount() {
            // 读取当前行的面额和输入的数量
            const denomination = parseInt(this.dataset.denomination);
            const count = parseInt(this.value) || 0;
            // 计算单种面额的金额
            const amount = denomination * count;
            // 更新右侧金额单元格
            this.parentElement.nextElementSibling.textContent = amount;
            
            // 计算并更新总金额
            let total = 0;
            document.querySelectorAll('.amount').forEach(cell => {
                total += parseInt(cell.textContent) || 0;
            });
            document.getElementById('total').textContent = total;
        }
    </script>
</body>
</html>

关键逻辑说明 #

• HTML本身不能做运算，必须靠JavaScript实现计算功能。
• 每个数量输入框用data-denomination属性存储对应钞票面额，JS通过这个属性直接拿面额值，不用手动写死在代码里。
• 给输入框绑定input事件，只要输入内容变化，立刻触发计算并更新结果。
• 额外做了总金额累加功能，你不需要的话可以删掉表脚和对应JS代码。

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