如何使用 JavaScript 更改烧瓶形式输出

Question

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

在上面的示例中，我想将工作开始时间更改为 10:00，并期望总小时数从 8 小时减少到 7 小时。我希望你们明白我的意思。

这是我使用的 div table 的示例：

<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：Link 到 jsFiddle：http://jsfiddle.net/bkjwgy10/36/

这是一个关于如何通过 javascript 完成的示例。我假设的一些假设是

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

一些注意事项：

您可以使用 moment.js 而不是编写自己的小时数计算——相关文档是 here。
考虑使用另一个名为 value 的属性来保存 Flask 将使用的信息，但格式不适合向查看者显示。观众看到的东西不一样，但价值是一样的。
我用的是$().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 更改烧瓶形式输出

How to change flask form output with JavaScript

javascript

python

jinja2

flask

flask-wtforms