Как изменить классы с выбранной областью в html таблицах

Question

Я пытался сделать календарь похожим на таблицы,

В своем коде я хотел бы зарегистрировать событие.

Мой желаемый результат - когда я нажимаю 2, а затем нажимаю 5, класс от 2 до 5 будет изменен. и клетки от first до hovered станут аква.

Так что я определил first переменную, но я чувствую, что должен также определить second переменные.

Есть ли какие-нибудь решения?

Спасибо

var first;

$("td").on('click', function(){
  first = this.id;
 });
 


$("td").hover(function() {
    const id = Number($(this).attr('id'));
      $("table td").removeClass("aqua");


    for(var j = first;j <= id; j++){
      $("#"+j).addClass("aqua");
    }
  });
  
    $("td").on('click', function(){
  second = this.id;
 });

.aqua{
  background-color: aqua;
}


td {
  padding: 10px;
  transition-duration: 0.4s;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
   </tr>
 <tr>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
    </tr>
  <tr>
  <td id="9">9</td>
  <td id="10">10</td>
  <td id="11">11</td>
  <td id="12">12</td>
  </tr>
</table>

Answer 1

• Календари семантически почти не имеют ничего общего (кроме дня недели) с табличными данными. Вместо <table> проще использовать <div> с.
• Выбор и состояние наведения не могут go в одной корзине.
• Ваша проблема немного сложнее, чем вы думали, создайте диапазон Массив, который будет содержать отсортированный min и max значения выбора.
• Используйте .slice(start, end), чтобы получить нужные элементы для выделения.
• classNames должен быть агности цвета c. Используйте скорее is-active и is-hover

function CalendarSelection() {

  const $days = $(this).find('.d.m_this');
  const range = [-1, -1];

  const $daysRange = rng => {
    rng.sort((a, b) => a - b);
    return $days.slice(rng[0], rng[1] + 1);
  }

  function hoverRange(ev) {
    if (range[0] < 0 || (range[0] > -1 && range[1] > -1)) return; // Do nothing
    $days.removeClass('is-hover');
    if (ev.type === 'mouseleave') return; // Stop here, it's a mouseleave.
    $daysRange([range[0], $days.index(this)]).addClass('is-hover');
  }

  function activeRange() {
    $days.removeClass('is-active is-hover');

    if (range[0] > -1 && range[1] > -1) { // RESET
      range[0] = -1;
      range[1] = -1;
    }

    if (range[0] > -1 && range[1] < 0) { // SET END
      range[1] = $days.index(this);
      $daysRange(range).addClass('is-active');
    }

    if (range[0] < 0 && range[1] < 0) { // SET START
      range[0] = $days.index(this);
      $daysRange([range[0], range[0]]).addClass('is-active');
    }
  }

  $days.on({
    click: activeRange,
    mouseenter: hoverRange,
    mouseleave: hoverRange,
  });
}

// Apply to all .calendar on page
$(".Calendar").each(CalendarSelection);

* {
  box-sizing: border-box;
  font: 14px/1.4 sans-serif;
}

.Calendar {
  display: flex;
  flex-flow: row wrap;
  max-width: 260px;
}

.Calendar>* {
  flex: 0 0 14.28%;
  text-align: center;
  padding: 0.5em;
}

.Calendar .wd {
  font-weight: bold;
}

.Calendar .d.m_this {
  transition: 0.2s;
  cursor: pointer;
}

.Calendar .d.m_this.is-hover {
  background: hsl(180, 70%, 90%);
}

.Calendar .d.m_this.is-active {
  background: hsl(200, 70%, 80%);
}

.Calendar .d.m_this:hover {
  background: hsl(180, 70%, 70%);
}

<div class="Calendar">
  <div class="wd">MO</div>
  <div class="wd">TU</div>
  <div class="wd">WE</div>
  <div class="wd">TH</div>
  <div class="wd">FR</div>
  <div class="wd">SA</div>
  <div class="wd">SU</div>

  <div class="d m_prev"></div>
  <div class="d m_prev"></div>
  <div class="d m_this">1</div>
  <div class="d m_this">2</div>
  <div class="d m_this">3</div>
  <div class="d m_this">4</div>
  <div class="d m_this">5</div>
  <div class="d m_this">6</div>
  <div class="d m_this">7</div>
  <div class="d m_this">8</div>
  <div class="d m_this">9</div>
  <div class="d m_this">10</div>
  <div class="d m_this">11</div>
  <div class="d m_this">12</div>
  <div class="d m_this">13</div>
  <div class="d m_this">14</div>
  <div class="d m_this">15</div>
  <div class="d m_this">16</div>
  <div class="d m_this">17</div>
  <div class="d m_this">18</div>
  <div class="d m_this">19</div>
  <div class="d m_this">20</div>
  <div class="d m_this">21</div>
  <div class="d m_this">22</div>
  <div class="d m_this">23</div>
  <div class="d m_this">24</div>
  <div class="d m_this">25</div>
  <div class="d m_this">26</div>
  <div class="d m_this">27</div>
  <div class="d m_this">28</div>
  <div class="d m_this">29</div>
  <div class="d m_this">30</div>
  <div class="d m_this">31</div>
  <div class="d m_next"></div>
  <div class="d m_next"></div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>