jquery - 使用 Jquery 过滤表行

Question

我有下表。当我点击 days-of-month-container 上的 th 时，例如 Mon 我如何比较它是 calander-day- 类到 users-container 上的日历日类并过滤 user-list 以便仅显示那些具有类 的行holiday 和 calendar-day- 类是否与点击的第 类相同？

     <table class="clndr-container" >
            <thead id="days-of-month-container">
                <tr >
                    <td></td>
                    <td>
                        <table >
                            <thead>
                                <tr >
                                    <th class="day-of-wk calendar-day-2015-11-02">
                                      <span>Mon</span>
                                    </th>
                                    <th class="day-of-wk calendar-day-2015-11-03">
                                      <span>Tue</span>
                                    </th>
                                    ....
                                </tr>
                            <thead>
                        </table>
                    </td>
                </tr>
            <thead>
            <tbody id="users-container">
                <tr class="user-list">
                    <th class="person">Mr John Doe</th>
                    <td class="days-container">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="am calendar-day-2015-11-02 holiday">
                                        <span>2</span>
                                    </td>
                                    <td class="pm calendar-day-2015-11-02 holiday"> </td>

                                    <td class="am calendar-day-2015-11-03">
                                        <span>3</span>
                                    </td>
                                    <td class="pm calendar-day-2015-11-03"> </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr class="user-list">
                    <th class="person">Mr Joe Blogs</th>
                    <td class="days-container">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="am calendar-day-2015-11-02">
                                        <span>2</span>
                                    </td>
                                    <td class="pm calendar-day-2015-11-02"> </td>

                                    <td class="am calendar-day-2015-11-03">
                                        <span>3</span>
                                    </td>
                                    <td class="pm calendar-day-2015-11-03"> </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>

Answer 1

为了解决这个问题，我会使用数据属性而不是类名。这将使您可以轻松地比较它，而无需解析类名来找出日期。

<th class="day-of-wk calendar-day" data-date="2015-11-02">
  <span>Mon</span>
</th>

对于 td 也是如此。

然后用 jQuery 比较日期并隐藏(未测试):

$('#days-of-month-container').on('click', 'th', function(){
  var $this = $(this);
  var compDate = $this.data('date');//get the date to compare

  var $lines = $('#users-container>tr');
  $lines.each(function(idx,line){
    var $line= $(line);
    var $holTd = $line.find('.holiday'); //find the .holiday in this line
    var isVisible = ($holTd.length && $holTd.data('date')===compDate); //has .holiday and is same date
    if(isVisible){
      $line.show();
    } else {
      $line.hide();
    }
  });
});

但我想知道您是否不能简化您的表格以使其没有嵌套表格...