javascript - 在具有特定行 ID 的模板表 Flask 中添加一行
问题描述
这是我的模板的一部分:
<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。
感谢您帮助解决此问题。
解决方案
我想办法。只需在我的添加按钮之前将我向上移动,令人惊讶的是,它可以工作。
推荐阅读
- asp.net-mvc - 使用反射和 Razor Tag Helper .Net 3.1 渲染 MVC 表单
- node.js - 如何使用 Nodejs 将视频帧直接读入内存?
- javascript - Discord.JS 如何向服务器中的所有成员发送消息?
- javascript - 检查一个值是否与另一个值相等
- java - Firebase Firestore 给出空指针异常
- c - 请解释这个输出。浮点变量的值确实被强制转换为整数。请解释为什么?
- python - Plotly Dash:如何根据用户输入更改标题标题?
- python - HTML 文件无法加载 CSS 文件,浏览器显示 net::ERR_ABORTED 404 即使在同一目录中
- django - Django + Vue.js 无法显示数据库中的图像
- ios - 无法手动将 dSYM 文件上传到 Firebase Crashlytics 4.0.0+