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

古城微笑少年丶 2022-09-15 12:50 141阅读 0赞

###   原生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> </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>
    
    </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>

效果图：

![e388dcf0e7874083b5ff0c273857957a.gif][]

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

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

[e388dcf0e7874083b5ff0c273857957a.gif]: /images/20220828/31720255f9c146338911ba75c7110646.png
[https_segmentfault.com_a_1190000013073583 -_js]: https://segmentfault.com/a/1190000013073583