Wed. Sep 27th, 2023

[ANSWERED] javascript – Getting Specific td’s from a table based on class name

By

Nov 20, 2022 html, javascript

Solution 1 :

:not() is your friend here

document.querySelectorAll("#dp1592253704966 > div > div.ui-datepicker-group.ui-datepicker-group-last > table > tbody > tr td:not(.ui-state-disabled)");

Problem :

I’ve spent too much time one this, trying every possible solution I could find online. I am trying to get all the td’s in my table, which I have but the problem is I have to filter some out.

My Table element’s HTML:

<table class="ui-datepicker-calendar">
<thead>
  <tr>
     <th class="ui-datepicker-week-end"><span title="Sunday">Sun</span></th>
     <th><span title="Monday">Mon</span></th>
     <th><span title="Tuesday">Tue</span></th>
     <th><span title="Wednesday">Wed</span></th>
     <th><span title="Thursday">Thu</span></th>
     <th><span title="Friday">Fri</span></th>
     <th class="ui-datepicker-week-end"><span title="Saturday">Sat</span></th>
  </tr>
</thead>
<tbody>
  <tr>
     <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
     <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
     <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">1</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default ui-state-hover" href="#">2</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" date-range-selected ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">3</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">4</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
  </tr>
  <tr>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">5</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">6</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">7</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">8</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">9</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">10</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">84</div>
        </div>
     </td>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">11</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
  </tr>
  <tr>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">12</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">13</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">14</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">15</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">16</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">17</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">18</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
  </tr>
  <tr>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">19</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">20</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">21</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">22</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">23</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">24</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">25</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
  </tr>
  <tr>
     <td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">26</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">27</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">28</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">29</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">30</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
        <a class="ui-state-default" href="#">31</a>
        <div class="lowest-rate-wrap">
           <div class="lowest-rate">111</div>
        </div>
     </td>
     <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
  </tr>

document.querySelectorAll("#dp1592253704966 > div > div.ui-datepicker-group.ui-datepicker-group-last > table > tbody > tr td");

This gives me 35 elements out of which 4 are disabled. I do not want the disabled elements. My ultimate goal is to add an event listener to my calender so that when any td element (date) is clicked on the calendar, I re-fetch my date element.

Comments

Comment posted by street_jesus

Why is it that sometimes I get the elements I am looking for but sometimes I get an empty NodeList[] ?

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022