Question

我在静态HTML中有一个日历（例如下面的例子），我想在胡佛上选择整周（只需添加＆＃39; .active＆＃39;类，点击它就应该返回第一个和最后一个通过点击选择一周中的某一天。

我认为我应该使用.on（）事件，因为它是由插件动态加载的。我尝试了很多jQuery选择器，但我找不到合适的选择器。请帮帮我，我想以最好的方式学习如何做到这一点:)。

<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top">
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<tbody>
   <tr>
      <td class="day active old">29</td>
      <td class="day old">30</td>
      <td class="day">1</td>
      <td class="day">2</td>
      <td class="day">3</td>
      <td class="day">4</td>
      <td class="day">5</td>
   </tr>
   <tr>
      <td class="day">6</td>
      <td class="day">7</td>
      <td class="day">8</td>
      <td class="day">9</td>
      <td class="day">10</td>
      <td class="day">11</td>
      <td class="day">12</td>
   </tr>
   <tr>
      <td class="day">13</td>
      <td class="day">14</td>
      <td class="day">15</td>
      <td class="day">16</td>
      <td class="day">17</td>
      <td class="day">18</td>
      <td class="day">19</td>
   </tr>
   <tr>
      <td class="day">20</td>
      <td class="day">21</td>
      <td class="day">22</td>
      <td class="day">23</td>
      <td class="day">24</td>
      <td class="day">25</td>
      <td class="day">26</td>
   </tr>
   <tr>
      <td class="day">27</td>
      <td class="day">28</td>
      <td class="day">29</td>
      <td class="day">30</td>
      <td class="day">31</td>
      <td class="day new">1</td>
      <td class="day new">2</td>
   </tr>
   <tr>
      <td class="day new">3</td>
      <td class="day new">4</td>
      <td class="day new">5</td>
      <td class="day new">6</td>
      <td class="day new">7</td>
      <td class="day new">8</td>
      <td class="day new">9</td>
   </tr>
</tbody>
</div></div>

问候。

Answer 1

试试这个：

<强> JQuery的：

如果您想点击

添加class

$(document).on('click', 'tr', function () {
    $('.active').removeClass('active');
    $(this).addClass('active')
});

如果您希望在悬停时添加class

$(document).on('mouseover', 'tr', function () {
    $('.active').removeClass('active');
    $(this).addClass('active')
});

<强> CSS：

.active{
    color:red;
}

<强> JSFiddle Demo - onClick

<强> JSFiddle Demo - Hover

Answer 2

似乎你正在寻找这样的东西。

$(document).on("click", "td", function(event){

\\your code here

});

Answer 3

整周很简单。单击td查看其父级

时的内容

$(document).on('click', 'td.day', function () {    
    $('.selected').removeClass('selected');/* clear previous class clicks*/
    $(this).parent().children().addClass('selected');  
});

悬停时请使用以下内容：

$(document).on('mouseenter mouseleave', 'tr', function () { 
     $(this).toggleClass('rowHoverClass');
})

的 DEMO

Answer 4

我相信你正在寻找这样的东西：

$(document).on("click", "tr", function() {
    $(this).addClass("active");
    var first_day = $(this).find("td").first();
    var last_day = $(this).find("td").last();
    console.log(first_day, last_day);
});

jsFiddle：http://jsfiddle.net/x5Af9/

如何在表中选择那些td？

4 个答案: