Question

I have a jquery code which enables a user to select amount of money they wish to borrow and how long they would like to pay it back.

What I need to do is display the results in grid like table so that if a user wants to borrow $200 for 30days, they can pay 200/30 =$6.66 per day, so the grid would have day 1: 6.66, day 2: 6.66, day 3: 6.66 …… up to day 30.

I have tried using iteration

created a variable called days

for( var i=i; i<days; i++) {
    //display days and amount
}

Any help?

Why display the amount everyday if it is the same amount?
Because there is a slider somewhere in the code and the user can vary the amount and dates to see what their repayments would be on daily basis, it is part of a larger code

Answer 1

Here is something to start with, just expand from here:

HTML:

Borrow Amount: <input type="text" id="borrow_amt" value="" />
<input type="button" id="update" value="Update Repayment" />

<p>&nbsp;</p>

<table border="1">
<tr><td colspan="30" align="center"> REPAYMENT SCHEME </td></tr>
<tr id="days"></tr>
<tr id="repayment"></tr>
</table>​

CSS:

.td_days { padding: 10px; }

JS:

$(document).ready(function() {

    $('#update').click(function() {

        $('tr#days').html("");
        $('tr#repayment').html("");

        var days = 30;
        for (i=1; i <= days; i++) {
            $('tr#days').append('<td class="td_days">'+ i +'</td>');
        }

        for (i=1; i <= days; i++) {
            $('tr#repayment').append('<td class="td_days">'+ $('#borrow_amt').val()/30 +'</td>');
        }
    });

});

​

Part of the code c/0 @Alex Ball’s suggestion, so give him a credit.

See code in action here: http://jsfiddle.net/DHYHx/