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

Question

我正在创建一个预算计算器，并且我希望允许用户建立一个他们的费用表。

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

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

我不确定如何处理这个问题。是否有可用的插件或库来模拟一个 Excel 电子表格，我可以在其中为 COLUMN 定义一个特定的方程，以便输入到该列的任何值都会相应地更新其他列，而不管哪一个（每两周一次，每月，每年）他们使用？

这是我的代码当前快照的Fiddle 中的一些相关代码：

<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>

---

$(document).ready(function() {
    $('#expenses input:gt(0)').keyup(function() {
        $(this).closest('td').siblings('td').not(':first').find('input').not(this).val($(this).val());
    });
});

$(document).ready(function () {
    $("a.deleteRow").live('click', function (){
        $(this).parent().parent().insertBefore();
    }); 
    $("a.addRow").live('click', function (){
        $("table.moneyTable tr:last").prev('tr').before("<tr class='bottom-border'><td class='deleteCell'><a class='deleteRow'><h4 class='delete'>[x]</h4></a></td><td class='right-border label'><input class='expense' type='text' width='50' placeholder='(...)' /></td><td><input class='expense currency' type='text' width='50' placeholder='0' /></td><td><input class='expense currency' type='text' width='50' placeholder='0' /></td><td><input class='expense currency' type='text' width='50' placeholder='0' /></td></tr>");
    }); 
});

Answer 1

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

Answer 2

您可以使用这种方法：当输入值发生变化时，重新计算所有内容。

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