如何使用JavaScript更改烧瓶表单输出

Question

我正在创建一个简单的烧瓶应用程序，它根据添加到烧瓶形式的数据生成输出。我想要实现的是编辑该输出的可能性，同时根据该更改更新其他值。应用程序正在计算工作时间，所以我需要允许开始工作等字段的版本。然后，这些变化需要反映每天总小时数的总和。这是输出页面：

在上面的例子中，我想将工作开始时间改为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做到这一点？所有数据都在视图级别处理并传递给模板。

非常感谢您的帮助。

Answer 1

TL; DR：链接到jsFiddle：http://jsfiddle.net/bkjwgy10/36/

这是一个如何通过q​​azxswpoi来做的例子。我假设的一些假设是

• 您验证了输入数据
• 你加入了javascript。您也可以通过jQuery来完成，但是您需要添加javascript。有关jQuery的文档可以在eventListeners找到。
• 你有自己的CSS来创建表格 - jsFiddle将显示自上而下的格式，因为我没有包含任何CSS。

一些考虑：

• 而不是写自己的小时计算，你可以使用here - 文档为moment.js。
• 考虑使用另一个名为here的属性，该属性包含将由Flask使用的信息，但不会格式化以便为查看者显示。观众会看到不同的东西，但价值是一样的。
• 我使用value而不是$().closest()。两者产生相同的结果，但因为你指定$().parent()和class="rTableCell"而不是class="rTableRow"和<tr>，我认为这是合适的。
• 您可以轻松添加更多列;我认为它是固定的，并以这种方式编写计算。

所以<td>，你可以在javascript或document.ready中添加这个

DOMContentLoaded