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

我正在创建一个简单的flask应用程序,该应用程序将基于添加到flask表单的数据生成输出。我想要实现的是可以编辑该输出,并同时根据该更改更新其他值的可能性。 App正在计算工作时间,因此我需要允许对诸如开始工作之类的字段进行编辑。然后,这些更改需要反映每天的总小时数。
这是输出页面:

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

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

非常感谢您的协助。

参考方案

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

这是有关如何通过javascript进行操作的示例。我假设的一些假设是

您验证了输入数据
您注册了jQuery。您也可以仅通过javascript进行操作,但是随后需要添加eventListeners。可以在here上找到有关jQuery的文档。
您有自己的CSS来创建表-jsFiddle将显示自顶向下的格式,因为我没有包含任何CSS。

一些注意事项:

除了编写自己的工时计算,您还可以使用moment.js-有关文档为here。
请考虑使用另一个名为value的属性,该属性保存Flask将使用的信息,但其格式不适合显示给查看者。观众会看到不同的东西,但价值却是相同的。
我使用的是$().closest()而不是$().parent()。两者都产生相同的结果,但是因为您指定了class="rTableCell"class="rTableRow"而不是<tr><td>,所以我认为这是适当的。
您可以轻松地添加更多列;我认为它是固定的,并以此方式编写了计算。

所以javascript,您可以将其添加到document.readyDOMContentLoaded

$('.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));
})

Flask:如何将JSON传递到javascript文件? - javascript

            我有对象main.pyfrom __future__ import with_statement from flask import Flask,request,jsonify,send_file,render_template import json # from flask_cors import CORS app = Flask…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量:我的问题是在javascript代码中使用for循环,for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码: {% block extra_javascript %} <script src="/static/js…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数:function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做?。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

执行onclick时获得意外令牌 - javascript

我正在使用onclick事件从PHP调用JS函数。这是我的代码:我在一个函数中,因此我需要通过PHP来完成它,因为然后我会返回:$html = '<input type="checkbox" checked value="1" id="setGetSku" name="se…