Question

我有下表。当我点击th上的days-of-month-container例如Mon时，如何将其calander-day-课程与users-container上的日历课程进行比较并过滤user-list，以便只显示那些行holiday所在的行，而calendar-day-类与点击的th上的行相同？

     <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

要解决这个问题，我会使用数据属性而不是classname。这样您就可以轻松地进行比较，而无需解析类名来查找日期。

<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();
    }
  });
});

但我想知道你是否无法简化你的表而没有嵌套表......

使用Jquery过滤表行

1 个答案: