javascript - jQuery 获取表中不按顺序的下一个文本框

Question

如果中间有没有文本框的行，如何从表中获取下一个可用的文本框？我有日期选择器，一旦选择了日期，就必须自动启用下一个可用的文本框。

HTML:

<table>
<tr><td colspan=2>HEAD</td></tr>
<tr><td>Item</td><td><input type=text name=a1 id=a1 class=dp></td></tr>
<tr><td>Item</td><td><input type=text name=a2 id=a2 class=dp></td></tr>
<tr><td colspan=2>HEAD2</td></tr>
<tr><td>Item</td><td><input type=text name=a3 id=a3 class=dp></td></tr>
<tr><td>Item</td><td><input type=text name=a4 id=a4 class=dp></td></tr>

项目

Jquery:

$(document).ready(function () {
    $(".dp").datepicker({
            dateFormat: 'dd/mm/yy',
        onSelect: function () {
            // Activate next  textbox and focus on it for further editing
            var el = $(this).closest('tr').next().find('input').prop("disabled", false).removeClass("disabled");
            // Trigger change as when using this event it overrides element onchange and we have to force the event to fire
            $(this).trigger("change");
        }
    });
});

这工作正常，但仅适用于第一个连续文本框(id 的 a1、a3)。它不适用于 id=a2。

Answer 1

您可以使用日期选择器集合的索引来使用eq()定位集合中的下一个

// store collection of inputs if collection is static, saves additional DOM searches
var $datepickers = $(".dp").datepicker({
  dateFormat: 'dd/mm/yy',
  onSelect: function() {
  // get current index
    var currIndex = $datepickers.index(this);
    // target next in collection
    $datepickers.eq(currIndex + 1).prop("disabled", false).removeClass("disabled");
    // Trigger change as when using this event it overrides element onchange and we have to force the event to fire
    $(this).trigger("change");
  }
});

注意，如果要动态添加行，则需要在回调内构建集合