Looping through input field of HTML table in two ways

Question

I want to change date of one input field based on selected date from another input field. My HTML layout is as below:

<input id="all" c="d" d="4" />
<table>
    <thead>
        <tr>
            <th>1st</th>
            <th>2nd</th>
            <th>3rd</th>
            <th>4th</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input c="y" d="5" /></td>
            <td><input c="d" d="2" /></td>
            <td><input c="m" d="2" /></td>
            <td><input /></td>
        </tr>
        <tr>
            <td><input c="y" d="10" /></td>
            <td><input c="d" d="8" /></td>
            <td><input c="m" d="2" /></td>
            <td><input /></td>
        </tr>
    </tbody>
</table>

I want to change the dates of input field in two ways:

1. If an user select a date from input id="all", then dates of all input fields of the table will be changed according to the values of c and d attribute.

2. But, if an user does not select from input id="all" and select date from any input field of table, then the date of input fields for the same row will be changed, but the input fields of another row will be left blank/unchanged.

As for example, if an user select a date from 1st Column of 1st row of the table, then 2nd, 3rd & 4th column of 1st row will be changed, but there will be no effect on dates of 2nd row. On the other hand, if an user selects date from 3rd Column of 2nd row, then only date of 4th Column of 2nd row will be changed.

It seems to be very complicated logic to me. I can provide you the basic code for changing the date using jQuery DatePicker widget. Here is the code:

$("#all").datepicker({dateFormat: 'dd/mm/yy'});
$('input').datepicker({
    dateFormat: 'dd/mm/yy',
    onClose: function (date) {
        var date2 = $(this).datepicker('getDate');
        alert(date2);
        $('input').each(function (i, op) {
            var c = $(this).attr('c');
            var d = parseInt($(this).attr('d'), 10);

            if (c == 'y') {
                date2.setFullYear(date2.getFullYear() + d);
            }
            if (c == 'd') {
                date2.setDate(date2.getDate() + d);
            }
            if (c == 'm') {
                date2.setMonth(date2.getMonth() + d);
            }
            $(this).closest('td').next().find('input').datepicker('setDate', date2);
        });            
    }
});

This code change the date of all input field next to the selected field. So, If an user change date in first row, it will also change the date of 2nd row (which I don't want, I want only 1st row will be changed).

How can I modify the jQuery code so that it can fulfil my new condition/logic? I have created a jsFiddle: http://jsfiddle.net/infomamun/vvt4hfv6/.

Answer 1

I have updated your code a bit.

Instead of $('input').each(function (i, op), i used some other logic as follows:

http://jsfiddle.net/vvt4hfv6/4/

$('input').datepicker({
        dateFormat: 'dd/mm/yy',
        onClose: function (date)
        {
            var date2 = $(this).datepicker('getDate');
            alert(date2);
            var targetInputs = null;
            var eventFromAll = false;

            if($(this).attr("id") == "all")
            {
                targetInputs = $('input');
                eventFromAll = true;
            }
            else
                targetInputs = $(this).closest("tr").find('input');

            $(targetInputs).not(this).each(function (i, op)
            {
                var c = $(this).attr('c');
                var d = parseInt($(this).attr('d'), 10);

                if (c == 'y') {
                    date2.setFullYear(date2.getFullYear() + d);
                }
                if (c == 'd') {
                    date2.setDate(date2.getDate() + d);
                }
                if (c == 'm') {
                    date2.setMonth(date2.getMonth() + d);
                }

                   $(this).datepicker('setDate', date2);
            });            
        }
    });

Hope you are looking for this.