当单元格不是输入字段时如何获取表单提交的行数据

Question

我正在处理问题集 9（金融）并尝试添加我的个人风格（允许用户通过指数本身购买更多股票或出售他们已经拥有的股票的股票，而无需手动输入股票的符号）。话虽如此，我有以下 HTML：

{% extends "layout.html" %}

{% block title %}
    Portfolio
{% endblock %}

{% block main %}
        <table class="table table-striped center">
            <thead>
                <tr>
                    <th class="text-start">Symbol</th>
                    <th class="text-start">Name</th>
                    <th class="text-end">Shares</th>
                    <th class="text-end">Price</th>
                    <th class="text-end">TOTAL</th>
                    <th class="text-middle">Buy/Sell</th>
                </tr>
            </thead>
            <tbody>
                {% for stock in stocks %}
                <form action="/" method="post">
                    <tr id="stock_{{ loop.index }}">
                        <td class="text-start" name="symbol" id="symbol">{{ stock["symbol"] }}</td>
                        <td class="text-start">{{ stock["name"] }}</td>
                        <td class="text-end">{{ stock["shares"] }}</td>
                        <td class="text-end">{{ stock["price"] | usd }}</td>
                        <td class="text-end">{{ ((stock["price"]) * (stock["shares"])) | usd }}</td>
                        <td class="text-middle">
                            <input type="number" min="1" name="shares" placeholder="shares" style="width:80px">
                            <button type="submit" name="action" value="sell" class="btn btn-primary button">Sell</button>
                            <button type="submit" name="action" value="buy" class="btn btn-primary button">Buy</button>
                        </td>
                    </tr>
                </form>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-end"><b>Cash</b></td>
                    <td class="text-end">{{ cash[0]["cash"] | usd }}</td>
                </tr>
                <tr>
                    <td colspan="4" class="text-end"><b>TOTAL</b></td>
                    <td class="text-end">{{ total | usd }}</td>
                </tr>
            </tfoot>
        </table>
        <script>
            document.querySelector("form")addEventListener("submit", function() }
                let value = getElementById("#symbol");
                console.log(value);
                alert(value);
            )};
        </script>
{% endblock %}

这将创建以下网页：

我的表格是通过从我的app.py 控制器传入的名为stocks 的字典列表动态生成的。我觉得将表单提交放在每个表格行而不是整个表格上是最简单的，这样我就可以知道单击buy 或sell 按钮时实际提交了哪一行。我不知道如何从不是输入字段的单元格（在本例中为 <td class="text-start" name="symbol" id="symbol">{{ stock["symbol"] }}</td>）传递数据，以便我可以在服务器端使用该信息来获取有关股票的所有其他相关信息。我在这里从我的代码中得到了TypeError: quote_from_bytes() expected bytes request.form.get("symbol") 行：

@app.route("/", methods=["POST", "GET"])
@login_required
def index():
    """Show portfolio of stocks"""

    # Get users cash balance
    cash = db.execute("SELECT cash FROM users WHERE id = ?", session["user_id"])
    total = cash[0]["cash"]

    # Make sure stocks table exists (will only be applicable until first stock purchase on site)
    if (db.execute("SELECT name FROM sqlite_master WHERE type = ? AND name = ?", "table", "stocks")):

        if request.method == "POST":
            # Run checks on input
            if not request.form.get("shares"):
                return apology("Missing shares")
            if int(request.form.get("shares")) < 1:
                return apology("Please input positive shares")

            # Look up stocks current price
            shares = float(request.form.get("shares"))
            print(shares)
            stock = lookup(request.form.get("symbol"))
            print(stock)
            price = float(stock["price"])
            print(price)

我相信抓取request.form.get("symbol") 没有意义，因为它不是表单数据的一部分？无论如何要让该单元格中的值传递给我的服务器端？是的，最后的 JavaScript 试图尝试获取该数据，以便在提交时修改我可以使用的值，但我不确定。

Answer 1

感谢 cmets 我已经弄清楚了。我意识到这不是最好的问题。我已经实现了另一个 readonly 字段并将表单调整为单个单元格，如下所示：

   <tbody>
        {% for stock in stocks %}
            <tr id="stock_{{ loop.index }}">
                <td class="text-start">{{ stock["symbol"] }}</td>
                <td class="text-start">{{ stock["name"] }}</td>
                <td class="text-end">{{ stock["shares"] }}</td>
                <td class="text-end">{{ stock["price"] | usd }}</td>
                <td class="text-end">{{ ((stock["price"]) * (stock["shares"])) | usd }}</td>
                <td class="text-middle">
                    <form action="/" method="post">
                    <input type="number" min="1" name="shares" placeholder="shares" style="width:80px">
                    <input type="text" readonly name="symbol" value="{{ stock['symbol'] }}" style="width:80px">
                    <button type="submit" name="action" value="sell" class="btn btn-primary button">Sell</button>
                    <button type="submit" name="action" value="buy" class="btn btn-primary button">Buy</button>
                    </form>
                </td>
            </tr>
        {% endfor %}
    </tbody>