js实现表格框选并且变色（原生js实现在表格用鼠标框选并有反选功能）

最新推荐文章于 2022-10-29 21:01:15 发布

崽崽的谷雨

最新推荐文章于 2022-10-29 21:01:15 发布

阅读量971

点赞数

分类专栏： js 文章标签： css html html5

原文链接：https://segmentfault.com/a/1190000013073583

版权

js 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

原生js实现在表格用鼠标框选并有反选功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js框选 变色</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      overflow-y: hidden;
    }

    .table {
      width: 990px;
      height: 850px;
    }

    .table tr {
      height: 50px;
      overflow: scroll
    }

    .table-container {
      position: absolute;
      top: 0;
      left: 200px;
      height: 750px;
      width: 990px;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    #title {
      background-color: #BDE4F4;
    }

    .fileDiv {
      background-color: #FEFF89;
    }

    .seled {
      border: 1px solid red;
      background-color: #D6DFF7;
    }
  </style>
</head>

<body>
  <div class="table-container" id="tablewrapper">
    <table class="table" id="dataGrid" align="center">
      <tr id="title">
        <th>&nbsp;</th>
        <th>水果</th>
        <th>蔬菜</th>
      </tr>
      <tr id="tb1" class="fileDiv">
        <td><input type="checkbox" name="idarray" value="1" /></td>
        <td>苹果</td>
        <td>菠菜</td>
      </tr>
      <tr id="tb2" class="fileDiv">
        <td><input type="checkbox" name="idarray" value="2" /></td>
        <td>梨</td>
        <td>白菜</td>
      </tr>
      <tr id="tb3" class="fileDiv">
        <td><input type="checkbox" name="idarray" value="3" /></td>
        <td>葡萄</td>
        <td>萝卜</td>
      </tr>
      <tr id="tb4" class="fileDiv">
        <td><input type="checkbox" name="idarray" value="4" /></td>
        <td>桃子</td>
        <td>土豆</td>
      </tr>
      <tr id="tb5" class="fileDiv">
        <td><input type="checkbox" name="idarray" value="5" /></td>
        <td>苹果</td>
        <td>菠菜</td>
      </tr>
      以下省略十行……
    </table>
    <!-- <div id="tablewrapper"></div> -->
  </div>

</body>
<script type="text/javascript">
  var allpro2 = [];
  var index = 0;

  window.onload = function () {
    document.onmousedown = function () {
      var evt = window.event || arguments[0];

      var startX = (evt.x || evt.clientX);
      var startY = (evt.y || evt.clientY);

      if (startX > 220 && startX < 1210) {
        var selList = [];
        var fileNodes = document.getElementsByTagName("tr");
        for (var i = 0; i < fileNodes.length; i++) {
          if (fileNodes[i].className.indexOf("fileDiv") != -1) {
            fileNodes[i].className = "fileDiv";
            selList.push(fileNodes[i]);
          }
        }
        allpro2 = [];       //选错区域后重选则清空数组
        var yheight = document.getElementById("tablewrapper");
        if (yheight.scrollTop > 0) {      //判断初始滚动条是否为0 为后面是否加滚动条高度设置判断值
          var istrue = true;
        }
        paint(yheight, selList, startX, startY, istrue);

      }
    }
  };


  function paint(yheight, selList, startX, startY, istrue) {
    var isSelect = true;
    var selDiv = document.createElement("div");
    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
    selDiv.id = "selectDiv";
    document.body.appendChild(selDiv);

    selDiv.style.left = startX + "px";
    selDiv.style.top = startY + "px";

    var _x = null;
    var _y = null;


    document.onmousemove = function () {
      evt = window.event || arguments[0];
      if (isSelect) {
        if (selDiv.style.display == "none") {
          selDiv.style.display = "";
        }

        _x = (evt.x || evt.clientX);
        _y = (evt.y || evt.clientY);

        selDiv.style.left = Math.min(_x, startX) + "px";
        selDiv.style.top = Math.min(_y, startY) + "px";
        selDiv.style.width = Math.abs(_x - startX) + "px";
        selDiv.style.height = Math.abs(_y - startY) + "px";
      }
    };


    document.onmouseup = function () {
      if (selDiv) {
        if (istrue) {
          selDiv.style.height = Math.abs(_y - startY) + "px";
          selDiv.style.top = Math.min(_y, startY) + yheight.scrollTop + "px";
        } else {
          selDiv.style.height = Math.abs(_y - startY) + yheight.scrollTop + "px";
        }
        var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
        var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
        for (var i = 0; i < selList.length; i++) {
          var sl = selList[i].offsetWidth + selList[i].offsetParent.offsetParent.offsetLeft; //获取父元素table距离左边距离
          var st = selList[i].offsetHeight + selList[i].offsetTop;

          if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
            if (selList[i].className.indexOf("seled") == -1) {
              selList[i].className = selList[i].className + " seled";
            }
          } else {
            if (selList[i].className.indexOf("seled") != -1) {
              selList[i].className = "fileDiv";
            }
          }
        }
      }

      isSelect = false;
      if (selDiv) {
        document.body.removeChild(selDiv);
        showSelDiv(selList);
      }
      revs1();
      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
    }
  }

  function showSelDiv(arr) {         //确定选中范围更新数组allpro2
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].className.indexOf("seled") != -1) {
        var allpro1 = document.getElementById(arr[i].id).getElementsByTagName("td")[0].getElementsByTagName("input")[0];
        allpro2.push(allpro1);
      }
    }
  }


  function revs1() {        //反选函数
    if (allpro2.length > 0) {
      for (var i = 0; i < allpro2.length; i++) {
        if (allpro2[i].type == "checkbox" && allpro2[i].checked == true) {
          allpro2[i].checked = false;
        } else if (allpro2[i].type == "checkbox" && allpro2[i].checked == false) {
          allpro2[i].checked = true;
        }
      }
    }
    allpro2 = [];
  }
</script>

</html>

效果图：

本文参考 https://segmentfault.com/a/1190000013073583 -原生js实现在表格用鼠标框选并有反选功能

原文作者可能少发了代码，我改了一下

崽崽的谷雨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现表格框选并且变色（原生js实现在表格用鼠标框选并有反选功能）

原生js实现在表格用鼠标框选并有反选功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">..
复制链接

扫一扫