如何将方程式赋予HTML表格列，类似于Excel电子表格？

Question

请在此处查看网站和代码：http://jonathonmoore.com/sandbox/single.html

我正在创建一个网站，基本上为用户提供每周，每月和每年的财务视图。我有一个有四列的大桌子：

现在，我通过给每个单元格一个唯一的ID（#bwSalary，＃monSalary，＃annSalary等等）来强制表中的值，进行数学计算，然后替换文本。

这很乱。页面的另一部分允许用户向表中添加和删除行，并输入各种费用。我不能为每个人生成唯一的ID。必须有更好的方法。

所以我的问题是，是否有一种方法，使用jQuery，为每列分配一个等式 - 类似于你在Excel中可以做的。我想象的是计算每一行的年度贡献（可能使用唯一ID），然后jQuery将遍历每一行并填充每两周和每月行，只需获取年度列单元格中的值并将其除以有意义吗？

我知道有办法做到这一点，我只是不了解jQuery，知道如何找到我需要的正确细胞。

Answer 1

实现第二个表的一种简单方法是使用原始JQuery，并通过以编程方式查找同一行中的其他输入框来避免硬编码ID。这里有一些Coffeescript来说明：

# whenever the user finishes entering a value and clicks away
$('table input').on 'blur', ->
  # find all three input boxes in this row
  [biweekly, monthly, annual] = $(this).parents('tr').find('input')
  # update the first two in terms of the third
  $(biweekly).val($(annual).val() / 52 * 2)
  $(monthly).val($(annual).val() / 12)

如果您的应用程序变得更加复杂（或者您只是感兴趣），您可能需要查看反应式编程系统，例如tangle，{{3} }，angular等。就像Excel一样，他们会让你声明某事物的价值成为另一件事的某种表达（即公式），系统将确保每当一件事情发生了变化，所有相关的绑定也都会更新。