How to change classes with selected area in html tables

Question

I tried to make calendar like tables,

In my code,I would like to register event.

My desired result is when I click 2 and then click 5, the class of 2 to 5 will be changed. and first to hovered cells will become aqua.

So that I defined first variable , But I feel like I must also definesecondvariables.

Are there any solutions?

Thanks

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

Roko C. Buljan · Accepted Answer

Calendars have semantically almost nothing (besides day-of-week) to do with tabular data. Instead of

 it's easier to use s.  
Selection and hover state cannot go in the same basket.  
Your problem is a bit more complicated that you thought, create a range Array what will hold the sorted min and max values of a selection.  
Use .slice(start, end) to get the desired Elements for highlight.   
classNames should be color agnostic. Use rather is-active and 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%);
}

  MO
  TU
  WE
  TH
  FR
  SA
  SU

  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31

How to change classes with selected area in html tables

Answers (1)

Related Questions