如何像日历一样拖动 select html 单元格并突出显示

Question

假设我们有如下表格。

如果我在 2 处按下鼠标，然后在 5 处按下鼠标，我想要的结果是像日历视图一样突出显示单元格 2、3、4、5。

另一种情况是在 5 处 mousedown 然后在 3 处 mouseup，cells3,4,5 被高亮。

我怎样才能得到这样的结果？我尝试使用切换 class 但现在堆叠了。

如果有人遇到过此类问题，请告诉我。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Answer 1

给你，但是 JQUERY.

有一个用途

$(document).ready(function(){
  var first;
  var second;
  var list = [];
  $("td").click(function(){   
    if(first == null){
      first = this.id;
    }else{
      second = this.id;
      for(var i = first;i <= second; i++){
        changecolor(i);
      }
    }
    
    
  });
  function changecolor(id){
    $("#"+id).css("background-color","yellow");

  }
  $("button").click(function(){
    $("td").each(function(){
      $(this).css("background-color","white");
      first = null;
      second = null;
    });
  });
});

table tr td{
border:1px solid black;
padding:10px;
font-size:30px;
}

<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>
    </tr>
    <tr>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
    </tr>
    <tr>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
    </tr>
</table>
<button>Reset</button>

如何像日历一样拖动 select html 单元格并突出显示

How to select html cells and highlight by dragging like calendar

javascript

jquery

calendar