Javascript jquery中的响应单元格选择

我在玩弄一个反应灵敏的日历的想法

这里有一把小提琴，它在某种程度上说明了我在想什么

预期行为如下：

将向用户显示一行日期。有些是“a”级可用，有些是“b”级已预订

用户可以选择开始日期，也可以选择结束日期。用户只能选择a类的日期。如果用户未选择结束日期，则表示预订仅为一天

当用户选择开始日期时，该日期之前的所有日期都将不可用。此外，下一个b类日期之后的所有日期也将不可用，因此唯一可用的日期是第一个选定日期之后的日期

除了给每组连续的“class a”日期分配一个不同的class id之外，我想不出如何在js中传达这种行为

任何想法都值得赞赏

还有其他的考虑因素，比如如果用户再次选择开始日期，或者在开始日期和结束日期之间选择一个日期，会发生什么情况，以及一些提示，以便用户知道在任何给定点他们应该做什么，但我稍后会谈到这一点

与提琴所暗示的相反，不应该有拖动选择行为

html

css

可以使用jquery的.prevAll和.nextAll方法禁用b类之前的日期和之后的日期。此外，下面的代码仅用于选择开始日期，它以黄色突出显示可用日期，所以在这里您需要编写从可用日期中选择结束日期的逻辑

演示代码：

//单击一个类并取消选中它以查看其工作原理。。 $td.a.点击功能{ $this.toggleClassselected //查看是否已选择类。。 如果选择了$this.hasclass{ //获取所有以前的日期并禁用它们 $this.prevAll.a:不是'.b'.addClassdisabled //在'b'之后获取所有日期禁用它们 $this.nextAll.b：首先，nextAll.a.addClassdisabled //为可用日期添加了类。。 $this.nextAll.a:不是“.disabled”.addClassAvailable }否则{ $tr td.removeClassdisabled.RemoveClassAvailable } } 表td{ 宽度：100px； 高度：100px； 文本对齐：居中； 垂直对齐：中间对齐； 背景色：def； 边框：1px实心fff； } 表td.a{ 背景色：ddd； } 表td.b{ 背景颜色：英国广播公司； } .选定{ 背景色：红色！重要； } .残疾人{ 指针事件：无； 背景色：灰色！重要； } .可用{ 背景色：黄色！重要； } 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

---

您可以将自2000年以来的每一天存储为天。这允许您进行比较，以查看哪些日期在其他日期之前，等等。为什么不保留一个B类日期列表，然后过滤掉小于开始日期的条目，然后确保结束日期不能大于或等于列表剩余日期的最小值。还要确保结束日期大于开始日期，但如果开始日期刚好在B班日期之前呢？@Harith如果开始日期刚好在B班日期之前，则预订只持续一天。如果你这样做了几个月，那么从2000年起的天数方法将是合适的，但是如果你只做了一个月，那么给每天一个1-30的值。这就是它的逻辑，实施它是一个不同的问题。@Harith它将持续两个月，滚动。我假设一个月内没有预订，但我现在通过检查mouseover处理程序中的event.currentTarget来简化预订。如果遇到b类，则中止

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
  <td class="a">1</td>
  <td class=a>2</td>
  <td class=a>3</td>
  <td class=a>4</td>
  <td class=a>5</td>
  <td class=b>6</td>
  <td class=a>7</td>
  <td class=b>8</td>
  <td class=a>9</td>
  <td class=a>10</td>
  <td class=a>11</td>
  <td class=a>12</td>
  <td class=b>13</td>
  <td class=a>14</td>
  <td class=a>15</td>
  <td class=b>16</td>
  <td class=a>17</td>
  <td class=a>18</td>
  <td class=a>19</td>
  <td class=a>20</td>
  <td class=a>21</td>
  <td class=b>22</td>
  <td class=a>23</td>
  <td class=a>24</td>
  <td class=a>25</td>
  <td class=a>26</td>
  <td class=a>27</td>
  <td class=b>28</td>
  <td class=a>29</td>
  <td class=a>30</td>
  </tr>
</table>
Submit
Clear/Reset

$(function () {
  var isMouseDown = false,
    isHighlighted;
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass("a");
      isHighlighted = $(this).hasClass("a");
      return false; // prevent text selection
    })
    .mouseover(function () {
      if (isMouseDown) {
        $(this).toggleClass("a", isHighlighted);
      }
    });

  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });
});

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#def;
  border:1px solid #fff;
}

table td.a {
  background-color:#ddd;
}
table td.b {
  background-color:#bbc;
}