如何在html日历表中更改类，如日程安排 [英] How to change classes like schedule in html calendar tables

问题描述

我有类似html table.like

I have calendar like html tables.like

<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天的类别更改.(我附有图片)

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?

②还有其他实现时间表的方法，例如表达式(结果图如下所示)， 除了喜欢应用border-bottom选项?

②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');
  });
});

图像如下.

谢谢

推荐答案

您可以尝试使用 .nextAll()

获取匹配元素集合中每个元素的所有后续同级元素，可以选择使用选择器进行过滤.

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

和> :lt() 选择器:

在匹配集中选择 index 小于 index 的所有元素.

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

演示:

$(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>

这篇关于如何在html日历表中更改类，如日程安排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！