How to change classes like schedule in html calendar tables

Question

I have calendar like html tables.like

1 2 3 4 5 
6 7 8 9

I would like to change its classes like calendar schedule, if I clicked cell2,forward 3day's classes are changed.(I attached images)

①Are there any good way to realize it?

②Are there any other ways to realize schedule like expression(result image is illustrated below), except for like applying border-bottom options ?

My current attempt is like below.....

.outpatient {
    border-bottom: 3px solid yellow;
}

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

image is like below.

Thanks

user_7461381 · Answer

You can try using .nextAll()

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

and :lt() selector:

Select all elements at an index less than index within the matched set.

Demo:

$(function() {
  $("td").click(function() {
    $('td').removeClass('outpatient'); //If you want to reset in each click
    $(this).nextAll(':lt(3)').addClass('outpatient');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.outpatient {
  border-bottom: 3px solid yellow;
}



  
    1  2  3  4  5 
    6  7  8  9

How to change classes like schedule in html calendar tables

1 Answers