Question

我想根据另一个输入字段中的选定日期更改一个输入字段的日期。我的HTML布局如下：

<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>

我想以两种方式更改输入字段的日期：

如果用户从input id="all"中选择日期，则表格中所有输入字段的日期将根据c和d属性的值进行更改。< / p>
但是，如果用户没有从input id="all"中选择并从表的任何输入字段中选择日期，那么同一行的输入字段的日期将会更改，但另一个的输入字段将会更改行将保持空白/不变。

例如，如果用户从表格第一行的1st Column中选择日期，那么第二，第三和第二行的日期。第1行的第4列将被更改，但对第2行的日期没有影响。另一方面，如果用户从第2行的3rd Column中选择日期，则只会更改第2行4th Column的日期。

这对我来说似乎是非常复杂的逻辑。我可以使用jQuery DatePicker小部件为您提供更改日期的基本代码。这是代码：

$("#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);
        });            
    }
});

此代码更改所选字段旁边的所有输入字段的日期。因此，如果用户在第一行更改日期，它也会更改第二行的日期（我不想要，我希望只更改第一行）。

如何修改jQuery代码以便它能够满足我的新条件/逻辑？我创建了一个jsFiddle：http://jsfiddle.net/infomamun/vvt4hfv6/。

Answer 1

我已经更新了你的代码了。

我使用了以下其他逻辑代替$('input').each(function (i, op)：

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);
            });            
        }
    });

希望你正在寻找这个。

通过两种方式循环遍历HTML表的输入字段

1 个答案: