我正在创建一个简单的 flask 应用程序,它根据添加到 flask 表单的数据生成输出。我想要实现的是编辑该输出并同时根据该更改更新其他值的可能性。应用程序正在计算工作时间,因此我需要允许编辑诸如开始工作等字段。然后这些变化需要反射(reflect)每天的总小时数。 这是输出页面:
在上面的示例中,我想将工作开始时间更改为 10:00,并期望总工时从 8 小时减少到 7 小时。 我希望你们明白我的意思,伙计们。
这是我使用的 div 表的示例:
<div class="rTableRow" align="center">
<div class="rTableCell">{{ day['day'].strftime("%d") }}</div>
<div class="rTableCell">{{ day['day'].strftime("%a") }}</div>
<div class="rTableCell" contenteditable="true">{{ day['absence'] }}</div>
<div class="rTableCell" contenteditable="true">{{ day['start-hour'] }}</div>
<div class="rTableCell" contenteditable="true">{{ day['end-hour'] }}</div>
<div class="rTableCell" contenteditable="true">{{ day['additional-break'] }}</div>
<div class="rTableCell" contenteditable="true">{{ day['overtime'] }}</div>
<div class="rTableCell" contenteditable="true">{{ day['daily-total'] if day['daily-total'] != 0 else '-' }}</div>
有没有办法用 JavaScript 来做到这一点?所有数据都在 View 级别进行处理并传递到模板。
非常感谢您的帮助。
最佳答案
TL;DR:链接到 jsFiddle:http://jsfiddle.net/bkjwgy10/36/
以下是如何通过 javascript
执行此操作的示例。我假设的一些假设是
- 您验证了输入数据
- 您成立了
jQuery
。您也可以通过javascript
来完成此操作,但是您需要添加eventListeners
。有关 jQuery 的文档可以找到 here . - 您有自己的 CSS 来创建表格 - jsFiddle 将显示自上而下的格式,因为我没有包含任何 CSS。
一些注意事项:
- 您可以使用
moment.js
,而不是编写自己的工时计算。 -- 相关文档为 here . - 考虑使用另一个名为
value
的属性它包含 Flask 将使用的信息,但格式不适合向查看者显示。观众会看到不同的东西,但值(value)是相同的。 - 我用过
$().closest()
而不是$().parent()
。两者产生相同的结果,但因为您指定了class="rTableCell"
和class="rTableRow"
而不是<tr>
和<td>
,我认为这是合适的。 - 您可以轻松添加更多列;我认为它已经修复并以这种方式编写了计算。
所以javascript
,您可以将其添加到document.ready
中或DOMContentLoaded
$('.rTableCell').focusout(function(e) {
/* insert validation here */
// yield selected row
var row = $(this).closest('.rTableRow');
//alternative: console.log($(this).parent())
// get children (cells in row)
var rcells = $(this).closest('.rTableRow').children();
// set HTML to this
rcells.last().html(calculate_hours(rcells));
})
关于javascript - 如何使用 JavaScript 更改 Flask 表单输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52303432/