javascript - 如何选择表中的那些td？

Question

我有一个静态 html 中的日历(下面的示例)，我想在胡佛上选择整周(只需添加“.active”类，然后单击它应该返回通过单击选择的一周的第一天和最后一天就在上面。

我认为我应该使用 .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