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

Question

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

在上面的示例中，我想将工作开始时间更改为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/

下面是一个如何通过javascript进行操作的示例。我假设的一些假设是

• 您已验证输入数据
• 您注册了jQuery。您也可以只通过javascript进行操作，但是随后需要添加eventListeners。可以在here上找到有关jQuery的文档。
• 您有自己的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));
})