在具有特定行 ID 的模板表 Flask 中添加一行

Question

这是我模板的一部分：

<form method="POST">
            {{ form.hidden_tag() }}
            <table id="myTable">
                <tr class="heading">
                    <td>
                        Item
                    </td>

                    <td>
                        Price
                    </td>
                </tr>
                <div id="itemstable">
                    {% if items|length > 0 %}
                        {% for item in items %}
                            <tr class="item">
                                <td>
                                    <input id="item-{{ item.id }}" name="description-{{ item.id }}" required="" type="text" value="{{ item.description }}" >
                                </td>
                                <td>
                                    <input  id="item-{{ item.id }}" name="amount-{{ item.id }}" required="" type="number" min="0"  value="{{ item.amount }}" onchange="sumamount();">
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr class="item">
                            <div>
                            <td>
                                <input id="item-{{ items|length }}" name="description-{{ items|length }}" required="" type="text" value="{{form.description}}">
                            </td>
                            <td>
                                <input id="item-{{ items|length }}" name="amount-{{ items|length }}" required="" type="text" value="{{form.amount}}" onchange="sumamount();">
                            </td>
                                </div>
                        </tr>
                    {% endif %}
                </div>
            </table>
            <table>
                <tr class="total">
                    <div>
                    <td>
                        Total:
                    </td>
                    <td>
                       <input id="total" type="text" value="0"readonly>
                    </td>
                        </div>
                </tr>
            </table>

            <button id="add" onclick="addLineItem(event)">Add Item</button>
            <div>
</form>
    <script>

// function to add a row in table
    let currMax = {{ items|length }} + 1;
    function addLineItem(e){
        var lineItem = "<tr class='item'> <td> <input id='item-"+currMax+"' name='description-"+currMax+"' required='' type='text' value=''></td> <td> <input id='item-"+currMax+"' name='amount-"+currMax+"' required='' type='text' value=''></td> </tr>";
        currMax++;
        document.getElementById('myTable').innerHTML += lineItem;
        e.preventDefault();
        console.log("Still on page!");
    }
    function sumamount(){
        sum=0;
        $("input[name^='amount-']").each(function(){
            sum+=Number($(this).val());
        });
        $("#total").val(sum);
    }
</script>

我创建了一个添加一行的按钮（函数 addLineItem(e)）。 但是当我提交我的表格时。在请求中，这个添加的行不在请求中，我的第二个问题是这个新行没有在我的 js 函数 sumamount() 中考虑（除非我在金额字段中填写内容，否则值直到 0。

感谢您帮助解决此问题。

Answer 1

我找到了办法。只需在我的添加按钮之前将我向上移动，令人惊讶的是，它可以工作。