Как изменить дату каждого ввода каждого td на jquery

Question

Я намерен изменить дату другого поля ввода, выбрав дату из поля ввода на jquery datepicker Пользовательский интерфейс. Так что мой HTML макет:

<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> 
    </tbody> 
</table> 

и мой JQuery код (предполагая, что этот код использует JQuery-UI вилкой) для изменения даты является:

$('input').datepicker({dateFormat: 'dd/mm/yy', 
    onClose: function(date){ 
    var c = $(this).attr('c'); 
    var d = parseInt($(this).attr('d'),10); 

    var date2 = $(this).datepicker('getDate'); 
    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); 
} 
}); 

Что здесь происходит, если пользователь выберите дату в поле ввода 1st Column, добавьте 5years к выбранной дате и поместите результат в поле ввода 2nd Column. Затем, если пользователь выбирает/меняет дату в поле ввода 2nd Column, он добавляет 2 дня к выбранной дате 2nd Column и помещает эту дату в поле ввода 3rd Column и так далее.

Но я также должен указать способ, чтобы, если пользователь выбирает дату из поля ввода 1st Column, он добавит 5 лет к выбранной дате и выведет эту дату в 2nd Column, а затем добавит еще 2 дня с этим (назначенная дата + 5 лет) дата 2nd Column и вывести ее в 3rd Column, и этот процесс будет продолжен до тех пор, пока не будет достигнут последний td из этого числа tr.

Я не могу понять такой способ. Любая помощь будет оценена.

Answer 1

Логика правильная. Все, что вам нужно сделать, это перебрать каждый элемент ввода и определить значения c и d's и добавить его к следующему td.

<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> 
    </tbody> 
</table> 

$('input').datepicker({ 
     dateFormat: 'dd/mm/yy', 
     onClose: function (date) 
     { 
      var date2 = $(this).datepicker('getDate'); 
      $('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); 
      });    
     } 
    }); 

Вот скрипка: http://jsfiddle.net/6h6zj59v/