Question

我用jQuery UI plugin datepicker创建了一个日历。

我想要做的是在所选日期所在的tr之后添加一个元素。在下面的结构中，我标记了<---- *THIS ROW*，我尝试使用{<table class="ui-datepicker-calendar> <thead>...not important...</thead> <tbody> <tr> <td>1</td> <td>2</td> ... </tr> <tr> <---- *THIS ROW* <td class="ui-datepicker-current-day">8</td> <td>9</td> ... </tr> ...and so on </tbody> </table> 1}}。

插件创建的日历结构看起来像这样：

$(".ui-datepicker-calendar").find(".ui-datepicker-current-day").parent("tr").addClass("open");

所以我尝试使用以下代码执行此操作：

.closest()

我尝试了其他几种方法，例如$('#calendar').datepicker({ inline: true, firstDay: 1, showOtherMonths: true, onSelect: function(){ $(".ui-datepicker-calendar").find(".ui-datepicker-current-day").parent("tr").addClass("open"); } });，但它们都没有用。有谁知道我怎么选择它？

这里有一个片段：

＆＃13;

tr.open{
  background:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div id="calendar"></div>

＆＃13;

TableDefinition tableDefinition = StandardTableDefinition.of(schema);
table.toBuilder().setDefinition(definition)

＆＃13;

Answer 1

每次选择日期时，看起来都会重新绘制日期选择器。

您可以使用setTimeout()函数来安排类添加，以便在DOM更改并重新绘制选择器后执行它：

$(function() {
  $('#calendar').datepicker({
    inline: true,
    firstDay: 1,
    showOtherMonths: true,
    onSelect: function() {
      setTimeout(function() {
        $(".ui-datepicker-calendar")
          .find(".ui-datepicker-current-day")
          .parent().addClass("open");
      }, 100);
    }
  });
});

tr.open {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="calendar"></div>

Answer 2

您的代码无效，因为在事件执行时没有任何带有CSS类ui-datepicker-current-day的元素。你可以推迟一点调用，直到CSS类被设置为止：

＆＃13;

$('#calendar').datepicker({
  inline: true,
  firstDay: 1,
  showOtherMonths: true,
  onSelect: function(){
    
    setTimeout(function(){
        $(".ui-datepicker-calendar").find(".ui-datepicker-current-day").parent("tr").addClass("open")
    }, 10);
    
  }
});

＆＃13;

tr.open{
  background-color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div id="calendar"></div>

＆＃13;

Answer 3

尝试$(".ui-datepicker-calendar tr:eq(1)")

无法在jQuery datepicker中选择所选日期的父级

3 个答案: