Как изменить классы как расписание в html календарных таблицах - PullRequest
Новая
       2

Как изменить классы как расписание в html календарных таблицах

5 голосов
/ 23 февраля 2020

У меня есть календарь как html таблицы. Как 

<td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td> 
<td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>

Я хотел бы изменить его классы, такие как расписание календаря, если я щелкну ячейку 2, классы 3-дневного пересылки будут изменены. (Я прикрепил images)

good Есть ли хороший способ реализовать это?

there Есть ли другие способы реализовать расписание, например выражение (результат изображения показан ниже), кроме как применение border-bottom параметров?

Моя текущая попытка похожа на приведенную ниже ..... 

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

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

изображение, как показано ниже.

enter image description here

Спасибо

1 Ответ

3 голосов
/ 23 февраля 2020

Вы можете попробовать использовать .nextAll()

Получить все последующие элементы каждого элемента в наборе подходящих элементов, при желании отфильтрованные селектором .

и :lt() селектор:

Выбрать все элементы с индексом меньше чем индекс в согласованном наборе.

Демо: 

$(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;
}
<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> <td id="5">5</td> 
    <td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>
  </tr>
</table>
...