如何使用HTML表和jQuery创建费用表？

我正在创建一个预算计算器，现在我想让用户建立一个费用表

表中最初为他们设置了三个：租金、水和电/气。最后一行是按钮后，他们可以单击以在当前最后一行之后添加新行

这是我的问题。我希望用户能够在我提供的三列中的任意一列中输入他们的费用：双周、每月或每年，因为他们可能只知道其中一个时段的特定费用，所以我想自动为他们计算其他单元格的费用

我不知道该怎么做。是否有一个可以模仿excel电子表格的插件或库，我可以在其中为一列定义一个特定的方程式，这样输入到该列的任何值都会相应地更新其他列，而不管他们使用哪一列（每两周、每月、每年）

下面是我的代码的当前快照中的一些相关代码：

<table class="moneyTable width100" id="expenses">
    <tr>
        <td class="deleteCell fill-white"></td>

        <td class="right-border fill-white width50">
            <h3>Expense Type</h3>
        </td>

        <td class="fill-white">
            <h3>Bi-Weekly</h3>
        </td>

        <td class="fill-white">
            <h3>Monthly</h3>
        </td>

        <td class="fill-white">
            <h3>Annually</h3>
        </td>
    </tr>

    <tr>
        <td class="deleteCell">
            <h4 class="delete"><a class="deleteRow">[x]</a></h4>
        </td>

        <td class="right-border"><input class="expense"
        type="text" value="Rent" width="50"></td>

        <td><input class="expense currency" disabled="disabled"
        placeholder="0" type="text" width="50"></td>

        <td><input class="expense currency" disabled="disabled" placeholder="0" type="text" width="50"></td>

        <td><input class="expense currency" disabled="disabled" placeholder="0" type="text" width="50"></td>
    </tr>

    <tr>
        <td class="deleteCell">
            <h4 class="delete"><a class="deleteRow">[x]</a></h4>
        </td>

        <td class="right-border"><input class="expense" id="titleWater"
        type="text" value="Water" width="50"></td>

        <td><input class="expense currency" placeholder="0"
        type="text" width="50"></td>

        <td><input class="expense currency" placeholder="0"
        type="text" width="50"></td>

        <td><input class="expense currency" placeholder="0"
        type="text" width="50"></td>
    </tr>

    <tr>
        <td class="deleteCell">
            <h4 class="delete"><a class="deleteRow">[x]</a></h4>
        </td>

        <td class="right-border"><input class="expense" id="titleElectric"
        type="text" value="Electric/Gas" width="50"></td>

        <td><input class="expense currency" placeholder="0"
        type="text" width="50"></td>

        <td><input class="expense currency" placeholder=
        "0" type="text" width="50"></td>

        <td><input class="expense currency" placeholder=
        "0" type="text" width="50"></td>
    </tr>

    <tr>
        <td class="deleteCell"></td>

        <td class="right-border">
            <h3><a class="addRow">(Add Row)</a></h3>
        </td>

        <td></td>

        <td></td>

        <td></td>
    </tr>

    <tr>
        <td class="deleteCell fill-white"></td>

        <td class="right-border fill-white">
            <h3>Total Expenses</h3>
        </td>

        <td class="fill-white">
            <h4 id="bwNet"></h4>
        </td>

        <td class="fill-white">
            <h4 id="monNet"></h4>
        </td>

        <td class="fill-white">
            <h4 id="annNet"></h4>
        </td>
    </tr>

费用类型
双周
月刊
每年
[x]
[x]
[x]
（添加行）
总费用

---

$（文档）.ready（函数（）{
$（“#费用输入：gt（0）”.keyup（函数（）{
$（this）.closest（'td'）。同胞（'td'）。not（'：first'）。find（'input'）。not（this）.val（$（this.val（））；
});
});
$（文档）.ready（函数（）{
$（“a.deleteRow”）.live（'单击'，函数（）{
$（this.parent（）.parent（）.insertBefore（）；
}); 
$（“a.addRow”）.live（'click'，函数（）{
美元（“table.moneyTable tr:last”）.prev（“tr”）。在（“[x]”）之前；
}); 
});

您可以使用此方法：当输入值发生更改时，重新计算所有内容

input.onchange = function () {
   // select all values from rows and calculate total
}

---

我从来没有碰到过自动电子表格脚本为您自动执行此操作。但这种计算可以通过手动脚本完成。然而，正确的方法不应该是列的等式。在键入时，应首先计算整个行的基本年度费用。接下来为每个td->input resp创建.val（）。1/52、1/12和1/1。当然，第一个基本（年度）费用的计算取决于输入的字段（x52、x12或x1）

我认为这个答案不相关，因为Jon的问题涉及到计算的方式，或者是否有任何库自动实现这种可能性。顺便说一句，要触发计算，最好使用jquery'keyup'而不是js'onchange'keyup在每次击键后都会触发，即使excel也不会这样做，jquery是Javascript当使用jquery时，最好使用选择器$（“#sel”）.change（function（）{}）；

input.onchange = function () {
   // select all values from rows and calculate total
}