Как создать таблицу расходов с помощью HTML-таблиц и jQuery?

Я создаю калькулятор бюджета и нахожусь на том этапе, когда хочу позволить пользователю построить таблицу своих расходов.

Для них в таблице изначально задано три: Аренда, Вода и Электричество/Газ. После того, как последняя строка является кнопкой, они могут щелкнуть, чтобы добавить новую строку после текущей последней строки.

Вот моя проблема. Я хочу, чтобы пользователь мог вводить свои расходы в ЛЮБОЙ из трех столбцов, которые я предоставляю: раз в две недели, ежемесячно или ежегодно, потому что они могут знать эти конкретные расходы только за один из этих периодов времени, поэтому я хотел бы чтобы сделать расчет для них, автоматически, для других ячеек.

Я не уверен, как подойти к этому. Есть ли доступный плагин или библиотека, которая будет имитировать электронную таблицу Excel, где я могу определить конкретное уравнение для КОЛОННЫ, чтобы любые значения, введенные в этот столбец, соответствующим образом обновляли другие столбцы, и не имеет значения, какой из них (раз в две недели, ежемесячно, ежегодно) они использовали?

Вот некоторый соответствующий код из этого 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>");
    }); 
});