如何为 HTML 表格列提供方程式，类似于 Excel 电子表格？

Question

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

我正在创建一个网站，该网站基本上可以让用户每两周、每月和每年查看一次他们的财务状况。我有一个有四列的大表：

现在，我通过给每个单元格一个唯一的 ID（#bwSalary、#monSalary、#annSalary 等）、进行数学运算并替换文本。

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

所以我的问题是，是否有一种方法可以使用 jQuery 为每一列分配一个方程式 - 类似于您在 Excel 中可以执行的操作。我的设想是计算每一行的年度贡献（可能使用唯一的 ID），然后 jQuery 将遍历每一行并通过仅获取年度列单元格中的值并将其除以填充双周和每月行到 12 或 26 岁。有意义吗？

我知道有办法做到这一点，我只是不太了解 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、angular、@987654323 @等等绑定也更新了。