Question

我打算通过jquery datepicker UI从输入字段中选择日期来更改其他输入字段的日期。

所以我的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的输入字段中选择日期，则会在所选日期添加5年，并将结果放在2nd Column的输入字段中。然后，如果用户在2nd Column的输入字段中选择/更改日期，则会在2nd Column的所选日期添加2天，并将该日期放在3rd Column的输入字段中，依此类推

但我也必须设置一个方法，这样如果用户从1st Column的输入字段中选择一个日期，它将在所选日期添加5年并在2nd Column中输出该日期，然后它会在2nd Column的日期添加更多2天（初始选定日期+ 5年日期），并将其输出到3rd Column，此过程将一直持续到相关的td { {1}}到达了。

我无法弄清楚这样的方式。

Answer 1

你的逻辑是正确的。您需要做的就是遍历每个输入元素并确定c和d的值，并将其添加到下一个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/

如何通过jQuery更改每个td的每个输入的日期？

1 个答案: