Deactivate cells before the selected cell - JQuery

Question

Deactivate cells before the selected cell - JQuery

Navigation

#1 by (2 votes)

0

I'm creating a calendar with JQuery .

This is the code:

<div id="dncalendar-body" class="dncalendar-body">
    <table>
        <thead>
            <tr>
                <td>D</td>
                <td>L</td>
                <td>M</td>
                <td>M</td>
                <td>J</td>
                <td>V</td>
                <td>S</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="" data-date="30" data-month="9" data-year="2018">
                    <div class="entry">30</div>
                </td>
                <td class="" data-date="1" data-month="10" data-year="2018">
                    <div class="entry">1</div>
                </td>
                <td class="" data-date="2" data-month="10" data-year="2018">
                    <div class="entry">2</div>
                </td>
                <td class="" data-date="3" data-month="10" data-year="2018">
                    <div class="entry">3</div>
                </td>
                <td class="" data-date="4" data-month="10" data-year="2018">
                    <div class="entry">4</div>
                </td>
                <td class="" data-date="5" data-month="10" data-year="2018">
                    <div class="entry">5</div>
                </td>
                <td class="" data-date="6" data-month="10" data-year="2018">
                    <div class="entry">6</div>
                </td>
            </tr>
            <tr>
                <td class="" data-date="7" data-month="10" data-year="2018">
                    <div class="entry">7</div>
                </td>
                <td class="" data-date="8" data-month="10" data-year="2018">
                    <div class="entry">8</div>
                </td>
                <td class="" data-date="9" data-month="10" data-year="2018">
                    <div class="entry">9</div>
                </td>
                <td class="" data-date="10" data-month="10" data-year="2018">
                    <div class="entry">10</div>
                </td>
                <td class="" data-date="11" data-month="10" data-year="2018">
                    <div class="entry">11</div>
                </td>
                <td class="" data-date="12" data-month="10" data-year="2018">
                    <div class="entry">12</div>
                </td>
                <td class="" data-date="13" data-month="10" data-year="2018">
                    <div class="entry">13</div>
                </td>
            </tr>
            <tr>
                <td class="" data-date="14" data-month="10" data-year="2018">
                    <div class="entry">14</div>
                </td>
                <td class="" data-date="15" data-month="10" data-year="2018">
                    <div class="entry">15</div>
                </td>
                <td id="calendarClick" class=" today-date  calendarClick" data-date="16" data-month="10" data-year="2018">
                    <div class="entry" data-title="hoy">16</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="17" data-month="10" data-year="2018">
                    <div class="entry">17</div>
                </td>
                <td id="" class="" data-date="18" data-month="10" data-year="2018">
                    <div class="entry">18</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="19" data-month="10" data-year="2018">
                    <div class="entry">19</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="20" data-month="10" data-year="2018">
                    <div class="entry">20</div>
                </td>
            </tr>
            <tr>
                <td id="calendarClick" class=" calendarClick" data-date="21" data-month="10" data-year="2018">
                    <div class="entry">21</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="22" data-month="10" data-year="2018">
                    <div class="entry">22</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="23" data-month="10" data-year="2018">
                    <div class="entry">23</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="24" data-month="10" data-year="2018">
                    <div class="entry">24</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="25" data-month="10" data-year="2018">
                    <div class="entry">25</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="26" data-month="10" data-year="2018">
                    <div class="entry">26</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="27" data-month="10" data-year="2018">
                    <div class="entry">27</div>
                </td>
            </tr>
            <tr>
                <td id="calendarClick" class=" calendarClick" data-date="28" data-month="10" data-year="2018">
                    <div class="entry">28</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="29" data-month="10" data-year="2018">
                    <div class="entry">29</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="30" data-month="10" data-year="2018">
                    <div class="entry">30</div>
                </td>
                <td id="calendarClick" class=" calendarClick" data-date="31" data-month="10" data-year="2018">
                    <div class="entry">31</div>
                </td>
                <td id="calendarClick" class=" " data-date="1" data-month="11" data-year="2018">
                    <div class="entry">1</div>
                </td>
                <td id="calendarClick" class=" " data-date="2" data-month="11" data-year="2018">
                    <div class="entry">2</div>
                </td>
                <td id="calendarClick" class=" " data-date="3" data-month="11" data-year="2018">
                    <div class="entry">3</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/MDcalendar.js"></script>

</body></html>

I would like to know how to block the tb before the tb that I select with click

I assigned to the cells that can be clicked on an id and a class called CalendarClick , if these classes are removed then those cells can no longer be selected.

But I do not know which JQuery selector I should use to remove the id and class from the previous tb that I selected

I do this to recognize which cell I have selected

$('body').on('click', '#calendarClick', function(){  
    $(this).css("background", "#00FF00");
});

I have read a bit of the JQuery selectors but I still can not understand it.

javascript jquery css selectores-css

asked by Ernesto Emmanuel Yah Lopez 16.10.2018 в 18:03

source

1 answer

Initialize array Problem with preview interface in Android studio

score 2 · Accepted Answer

First of all, it is very bad practice to assign the same id to multiple elements on the same page. It is preferable that the selector works with the class attribute, which can be repeated for multiple elements.

You can disable the elements previous to the selected item by obtaining the index of it and applying an action to the elements obtained by the selector :lt() , not including the row separator tr . Something like this:

$('body').on('click', '.calendarClick', function() {
  $('table tbody td').removeClass('deshabilitado');
  
  let index = $('table tbody td').index(this);
  $('table tbody td:lt(' + index + ')').addClass('deshabilitado');
})

.calendarClick{
  color: #0000dd;
  cursor: pointer;
  text-decoration: underline;
}

table tbody td.deshabilitado{
   color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <thead>
            <tr>
                <td>D</td>
                <td>L</td>
                <td>M</td>
                <td>M</td>
                <td>J</td>
                <td>V</td>
                <td>S</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="" data-date="30" data-month="9" data-year="2018">
                    <div class="entry">30</div>
                </td>
                <td class="" data-date="1" data-month="10" data-year="2018">
                    <div class="entry">1</div>
                </td>
                <td class="" data-date="2" data-month="10" data-year="2018">
                    <div class="entry">2</div>
                </td>
                <td class="" data-date="3" data-month="10" data-year="2018">
                    <div class="entry">3</div>
                </td>
                <td class="" data-date="4" data-month="10" data-year="2018">
                    <div class="entry">4</div>
                </td>
                <td class="" data-date="5" data-month="10" data-year="2018">
                    <div class="entry">5</div>
                </td>
                <td class="" data-date="6" data-month="10" data-year="2018">
                    <div class="entry">6</div>
                </td>
            </tr>
            <tr>
                <td class="" data-date="7" data-month="10" data-year="2018">
                    <div class="entry">7</div>
                </td>
                <td class="" data-date="8" data-month="10" data-year="2018">
                    <div class="entry">8</div>
                </td>
                <td class="" data-date="9" data-month="10" data-year="2018">
                    <div class="entry">9</div>
                </td>
                <td class="" data-date="10" data-month="10" data-year="2018">
                    <div class="entry">10</div>
                </td>
                <td class="" data-date="11" data-month="10" data-year="2018">
                    <div class="entry">11</div>
                </td>
                <td class="" data-date="12" data-month="10" data-year="2018">
                    <div class="entry">12</div>
                </td>
                <td class="" data-date="13" data-month="10" data-year="2018">
                    <div class="entry">13</div>
                </td>
            </tr>
            <tr>
                <td class="" data-date="14" data-month="10" data-year="2018">
                    <div class="entry">14</div>
                </td>
                <td class="" data-date="15" data-month="10" data-year="2018">
                    <div class="entry">15</div>
                </td>
                <td class=" today-date  calendarClick" data-date="16" data-month="10" data-year="2018">
                    <div class="entry" data-title="hoy">16</div>
                </td>
                <td class=" calendarClick" data-date="17" data-month="10" data-year="2018">
                    <div class="entry">17</div>
                </td>
                <td id="" class="" data-date="18" data-month="10" data-year="2018">
                    <div class="entry">18</div>
                </td>
                <td class=" calendarClick" data-date="19" data-month="10" data-year="2018">
                    <div class="entry">19</div>
                </td>
                <td class=" calendarClick" data-date="20" data-month="10" data-year="2018">
                    <div class="entry">20</div>
                </td>
            </tr>
            <tr>
                <td class=" calendarClick" data-date="21" data-month="10" data-year="2018">
                    <div class="entry">21</div>
                </td>
                <td class=" calendarClick" data-date="22" data-month="10" data-year="2018">
                    <div class="entry">22</div>
                </td>
                <td class=" calendarClick" data-date="23" data-month="10" data-year="2018">
                    <div class="entry">23</div>
                </td>
                <td class=" calendarClick" data-date="24" data-month="10" data-year="2018">
                    <div class="entry">24</div>
                </td>
                <td class=" calendarClick" data-date="25" data-month="10" data-year="2018">
                    <div class="entry">25</div>
                </td>
                <td class=" calendarClick" data-date="26" data-month="10" data-year="2018">
                    <div class="entry">26</div>
                </td>
                <td class=" calendarClick" data-date="27" data-month="10" data-year="2018">
                    <div class="entry">27</div>
                </td>
            </tr>
            <tr>
                <td class=" calendarClick" data-date="28" data-month="10" data-year="2018">
                    <div class="entry">28</div>
                </td>
                <td class=" calendarClick" data-date="29" data-month="10" data-year="2018">
                    <div class="entry">29</div>
                </td>
                <td class=" calendarClick" data-date="30" data-month="10" data-year="2018">
                    <div class="entry">30</div>
                </td>
                <td class=" calendarClick" data-date="31" data-month="10" data-year="2018">
                    <div class="entry">31</div>
                </td>
                <td class=" " data-date="1" data-month="11" data-year="2018">
                    <div class="entry">1</div>
                </td>
                <td class=" " data-date="2" data-month="11" data-year="2018">
                    <div class="entry">2</div>
                </td>
                <td class=" " data-date="3" data-month="11" data-year="2018">
                    <div class="entry">3</div>
                </td>
            </tr>
        </tbody>
    </table>