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

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

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

下面是我使用的div表的示例：

{{day['day'].strftime%d} {{day['day'].strftime%a} {{天['缺席]} {{day['start-hour']} {{day['end-hour']} {{day['additional-break']} {{天['加班]} {{day['daily-total']如果day['daily-total']！=0其他'-'}}TL；DR:链接到JSFIDLE:

下面是一个如何通过javascript实现的示例。我的一些假设是

您验证了输入上的数据 您合并了jQuery。您也可以通过javascript来完成，但随后需要添加eventListeners。可以找到关于jQuery的文档。 您有自己的CSS来创建表——JSFIDLE将显示自顶向下的格式，因为我没有包含任何CSS。 一些考虑：

您可以使用moment.js文档，而不是编写自己的工时计算。 考虑另一个称为值的属性，该值保存了将被烧瓶所使用的信息，但没有为观看者显示的格式非常正确。观众会看到不同的东西，但价值是相同的。 我使用了$.closest而不是$.parent。两者都产生相同的结果，但因为您指定了class=rTableCell和class=rTableRow而不是and，所以我认为这是合适的。 您可以轻松地添加更多列；我假设它是固定的，并以这种方式编写计算。 所以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));
})