Flask项目带增量选项的响应式数据表开发问题求助

问题1：增减按钮仅对第一个输入框生效 #

原因 #

所有数量输入框复用了同一个id="demoInput"，而document.getElementById()只会返回页面中第一个匹配该id的元素，导致后续按钮点击只会修改第一个输入框的值。

解决方案 #

修改按钮点击事件，通过this传递当前按钮元素，再利用DOM关系定位到对应的输入框：

function increment(btn) {
    // +按钮的前一个相邻元素是输入框
    const input = btn.previousElementSibling;
    input.stepUp();
}

function decrement(btn) {
    // -按钮的后一个相邻元素是输入框
    const input = btn.nextElementSibling;
    input.stepDown();
}

同时修改按钮的onclick调用，传入当前元素：

<button onclick="decrement(this)">-</button>
<input type="number" min="0" max="1000" style="text-align:center; width: 15%;" value="0">
<button onclick="increment(this)">+</button>

问题2：避免重复编写产品行代码 #

解决方案 #

利用Flask的Jinja2模板引擎，从后端传递产品列表数据，通过循环批量渲染产品行，不用手动复制近百份HTML代码。

步骤1：Flask后端代码

从数据库或其他数据源获取产品数据，传递给模板：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 模拟产品数据，实际可从数据库读取
products = [
    {"name": "Product A", "price": "20$"},
    {"name": "Product B", "price": "20$"},
    # 更多产品...
]

@app.route('/create-order')
def create_order():
    return render_template('order_form.html', products=products)

if __name__ == '__main__':
    app.run(debug=True)

步骤2：前端模板（order_form.html）

用Jinja2循环渲染所有产品行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <style>
        table {
            margin-bottom:200px;
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            border: 1px solid #ddd;
        }

        th, td {
            text-align: center;
            padding: 8px;
        }

        tr:nth-child(even){background-color: #f2f2f2}
    </style>
</head>
<body>
<div style="overflow-x:auto;">
    <table>
        <tr>
            <th>产品</th>
            <th>价格</th>
            <th>数量</th>
        </tr>
        <!-- 循环渲染所有产品 -->
        {% for product in products %}
        <tr>
            <td>{{ product.name }}</td>
            <td>{{ product.price }}</td>
            <td>
                <button onclick="decrement(this)">-</button>
                <input type="number" min="0" max="1000" style="text-align:center; width: 15%;" value="0">
                <button onclick="increment(this)">+</button>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>
<script>
    function increment(btn) {
        const input = btn.previousElementSibling;
        input.stepUp();
    }
    function decrement(btn) {
        const input = btn.nextElementSibling;
        input.stepDown();
    }
</script>
</body>
</html>

额外优化：保存时仅提交数量大于0的产品 #

添加保存按钮，收集有效产品数据提交到后端：

<button onclick="saveOrder()" style="margin:20px;">保存订单</button>

<script>
    // ... 之前的increment/decrement函数 ...

    function saveOrder() {
        const orderItems = [];
        // 遍历所有产品行（排除表头）
        const rows = document.querySelectorAll('table tr:not(:first-child)');
        rows.forEach(row => {
            const productName = row.querySelector('td:first-child').textContent;
            const quantity = parseInt(row.querySelector('input').value);
            if (quantity > 0) {
                orderItems.push({
                    product: productName,
                    quantity: quantity
                });
            }
        });
        // 提交到Flask后端
        fetch('/save-order', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(orderItems)
        }).then(res => res.json()).then(data => {
            // 保存成功后跳转至订单页面
            window.location.href = '/order-page';
        });
    }
</script>

对应的Flask后端保存路由：

@app.route('/save-order', methods=['POST'])
def save_order():
    order_items = request.get_json()
    # 此处可将订单数据写入数据库
    print('已保存订单产品:', order_items)
    return jsonify({"success": True})

内容的提问来源于stack exchange，提问作者גיא בוהדנה