javascript - 如何像日历一样通过拖动选择html单元格并突出显示

Question

假设我们有如下表。

如果我将鼠标放在 2 处，然后将鼠标放在 5 处，我想要的结果是单元格 2,3,4,5 像日历 View 一样突出显示。

另一种情况是 mousedown 在 5 处，然后 mouseup 在 3 处，cell3,4,5 突出显示。

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

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

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