如何更改 html 日历表中的课程等课程答案

【问题标题】：How to change classes like schedule in html calendar tables如何更改 html 日历表中的课程等课程
【发布时间】：2020-06-07 05:38:23
【问题描述】：

我有像 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天的课程被改变了。（我附上了图片）

①有什么好的实现方法吗？

②有没有其他的方法来实现像表达式这样的调度（结果图如下），除了喜欢应用border-bottom 选项？

我目前的尝试如下.....

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

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

图片如下。

谢谢

【问题讨论】：

标签： javascript jquery html css html-table

【解决方案1】：

您可以尝试使用.nextAll()

获取匹配元素集中每个元素的所有后续兄弟，可选地由选择器过滤。

和:lt() 选择器：

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

演示：

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

【讨论】：