Javascript 当鼠标改变方向时删除高亮显示

我正在尝试开发一个可定制的时间表web应用程序

我所追求的本质上是当您单击并拖动以高亮显示文本时所获得的正常高亮显示行为，但我希望这适用于表数据元素。就像在Excel中一样，如果单击并拖动以高亮显示单元格，然后反转鼠标方向，它将取消高亮显示“回溯”过的单元格

使用jQuery可以做到这一点吗

到目前为止，我可以“突出显示”单元格，但我不知道如何控制取消突出显示，而不取消突出显示鼠标留下的所有内容。我已经研究了一个解决方案很长时间，但没有成功

以下是我目前掌握的代码：

HTML:

Javascript:

function addAppt() {
$('td').css('cursor', 'cell');
$('textarea').css('cursor', 'cell');
var spanCount = 1; 
$('td').mousedown(function(){
      $('td').hover(function(){
        $(this).addClass('highlight');
      });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}

function delAppt() {
    $('td').css('cursor', 'not-allowed');
    $('textarea').css('cursor', 'not-allowed');
    $('td').click(function(){
      $(this).removeClass('highlight');
    });
    $('td').mousedown(function(){
      $('td').hover(function(){
        $(this).removeClass('highlight');
      });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}

编辑：我添加了一个JSFIDLE，看看这是否能引起更多的注意

---

我大约两个月前才学会如何编写代码，因此如果此代码看起来效率低下/糟糕，我深表歉意。如果提供解释，我愿意接受其他建议/技巧

而不是

$（this.addClass（'highlight'）尝试
$（this）.toggleClass（'highlight'） @ imMimaToGLCGLASS在光标离开单元格时，用于突出显示单元格，但是它对每一个悬停的单元格都是这样的，包括拖曳范围中的单元格。因此，我在单击的位置高亮显示一个单元格，然后在光标所在的位置高亮显示另一个单元格，但中间的所有单元格也都取消高亮显示。
table {
  font-family: Arvo, Arial, sans-serif;
  border-collapse: separate !important;
  border-top: 2px solid #4DC7E8;
  border-left: 2px solid #4DC7E8;
  border-radius: 6px;
}

.days-of-the-week th {
  width: 160px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
  border-radius: 6px;
}

tr td, th {
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
  border-radius: 6px;
}

td {
  height: 50px;
}

.days-of-the-week .time-col {
  width: 80px;
}

tbody th {
  text-align: right;
  padding: 5px 3px;
}

.highlight {
  background-color: rgba(255, 108, 78, 0.3); 
}

.appt-text {
   background-color: inherit;
   border: 0px;
   width: 100%;
   height: 100%;
   outline: none;
   cursor: default;
}

function addAppt() {
$('td').css('cursor', 'cell');
$('textarea').css('cursor', 'cell');
var spanCount = 1; 
$('td').mousedown(function(){
      $('td').hover(function(){
        $(this).addClass('highlight');
      });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}

function delAppt() {
    $('td').css('cursor', 'not-allowed');
    $('textarea').css('cursor', 'not-allowed');
    $('td').click(function(){
      $(this).removeClass('highlight');
    });
    $('td').mousedown(function(){
      $('td').hover(function(){
        $(this).removeClass('highlight');
      });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}