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

Question

假设我们有如下表。

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

另一种情况是 mousedown 在 5 处，然后 mouseup 在 3 处，cell3,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

这里是 go，但是有一个使用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>