Filter table rows using Jquery

288
December 10, 2016, at 1:07 PM

I have the following table. When I click on a th on the days-of-month-container e.g Mon how do I compare it's calander-day- class to the calendar-day class on the users-container and filter the user-list so that only those rows are displayed where they have class holiday and the calendar-day- class is the same as the one on the clicked 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

To solve this I would use data attributes instead of classname. This will allow you to compare it easily, without having to parse the classname to find out the date.

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

same for td's.

then to compare the date and hide as you said with jQuery (not tested) :

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

But I'm wondering if you can't simplify your table to not have nested tables...

READ ALSO
Uncaught ReferenceError: onsubmit function is not defined

Uncaught ReferenceError: onsubmit function is not defined

OK So its kind of the same but not entirelyI had a function and variables that needed to be moved out of the document

499
jquery hotkeys for spacebar

jquery hotkeys for spacebar

I am trying to use jquery hotkeys to capture keypress eventsI am unable to capture spacebar press

379
Character matching

Character matching

I need to match a string to have words and not numbers, I need to match special characters such as $!:{}_ if they are part of the word but ignore otherwise

233
Passing a ViewModel object as a Json object to view

Passing a ViewModel object as a Json object to view

Im trying to pass a ViewModel object as a Json object to view

301