模拟Windows 按住Ctrl和shift多选和取消的功能

置顶 `依舞仟崖

已于 2022-09-07 09:50:56 修改

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： Web前端Ctrl和shift多选和取消的功能

于 2019-02-28 18:48:10 首次发布

本文链接：https://blog.youkuaiyun.com/zhang678991/article/details/88040955

近期有很多小伙伴想写Windows系统的按住Ctrl和Shift多选和取消多选的功能，然而我近期也写了一个~分享给大家吧！
不说了直接上代码
下面展示同样高亮的 代码片.

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .backactive{
      background:#4AA0F9;
    }
    td,th{
      width: 200px;
      text-align: center;
      border: 1px solid #dddddd;
    }
  </style>
</head>
<body>
<table class="table">
  <thead>
  <tr><th>1</th><th>1</th><th>1</th><th>1</th></tr>
  </thead>
  <tbody>
  <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  </tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  var tableTr = $(".table tbody").find("tr"); // 首先找到tr
  tableTr.click(function (event) {
    if (event.ctrlKey == 1) { // 按住clrl键可以多选 || 取消多选
      if ($(this).hasClass('backactive')) { // 如果当前行为选中状态。
        $(this).removeClass('backactive');
      } else {
        $(this).addClass('backactive');
      }
    } else if (event.shiftKey == 1) { //按住shift键可以多选 || 取消多选
      tableTr.removeClass("backactive");
      var endIndex; // 作为当shift按住时点击行的下标（index）
      for (var k = 0; k < tableTr.length; k++) {
        if (this == tableTr[k]) {
          endIndex = k;
        }
      }

      var start, end;
      if (sessionStorage.startIndex < endIndex) { //做比较，永远将第一次点击行和最后一次点击行的index，的小值赋值给start，大的赋值给end
        start = sessionStorage.startIndex;
        end = endIndex;
      } else {
        start = endIndex;
        end = sessionStorage.startIndex;
      }

      for (var j = 0; j < tableTr.length; j++) {
        if (j >= start && j <= end) {
          $(tableTr[j]).addClass("backactive");
        } else {
          $(tableTr[j]).removeClass("backactive");
        }
      }
    } else if (event.shiftKey !== 1 && event.ctrlKey !== 1) { //正常点击的时候
      var startIndex;
      for (var i = 0; i < tableTr.length; i++) {
        tableTr[i].style.backgroundColor = '';
        if (this == tableTr[i]) {
          startIndex = i;
          sessionStorage.startIndex = startIndex; //将当前行index保存在session当中
        }
      }
      $(this).addClass('backactive').siblings("tr").removeClass("backactive");
    }
  });
</script>

在这里插入图片描述