0

私は予算計算機を作成していて、ユーザーが自分の経費の表を作成できるようにしたいところです。

最初にテーブルに設定されているのは、家賃、水道、電気/ガスの3つです。最後の行がボタンになった後、クリックして現在の最後の行の後に新しい行を追加できます。

これが私の問題です。ユーザーは、私が提供する3つの列（隔週、月次、または年次）のいずれかに費用を入力できるようにします。これは、ユーザーがその特定の費用を知っているのは、これらの期間の1つだけであるためです。それらの計算を、自動的に、他のセルに対して実行します。

これにどうアプローチするかわかりません。COLUMNの特定の方程式を定義して、その列に入力された値がそれに応じて他の列を更新し、どちらが問題にならないようにすることができる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>

$(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>");
    }); 
});
4

2 に答える 2

1

私はあなたのためにこれを自動的に行う自動スプレッドシートスクリプトにぶつかったことはありません。ただし、この計算は手動スクリプトで実行できます。ただし、正しいアプローチは列の方程式であってはなりません。キーアップでは、最初に行全体の基本的な年間経費を計算する必要があります。次に、各td-> input respに対して.val（）を実行します。1 / 52、1 / 12、1/1。もちろん、最初の基本（年間）費用の計算は、入力が行われるフィールド（x52、x12、またはx1）によって異なります。

于 2012-08-17T23:04:06.290 に答える
0

この方法を使用できます。入力の値が変更されたときに、すべてを再計算します。

input.onchange = function () {
   // select all values from rows and calculate total
}
于 2012-08-17T22:06:43.203 に答える