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

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

Answer 2

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

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

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

2 个答案: