javascript - 捕获表格中的多个td元素-6ren

javascript - 捕获表格中的多个td元素

转载作者：行者123 更新时间：2023-11-30 14:17:51

我正在研究如何在表格中选择单元格。

我在这里找到了非常好的解决方案:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.ids = [];
});

app.directive('dragSelect', function($window, $document) {
  return {
    scope: {
      dragSelectIds: '='
    },
    controller: function($scope, $element) {
      var cls = 'eng-selected-item';
      var startCell = null;
      var dragging = false;

      function mouseUp(el) {
        dragging = false;
      }
      
      function mouseDown(el) {
        dragging = true;
        setStartCell(el);
        setEndCell(el);
      }
      
      function mouseEnter(el) {
        if (!dragging) return;
        setEndCell(el);
      }
      
      function setStartCell(el) {
        startCell = el;
      }
      
      function setEndCell(el) {
        $scope.dragSelectIds = [];
        $element.find('td').removeClass(cls);
        $(cellsBetween(startCell, el)).each(function() {
          var el = angular.element(this);
          el.addClass(cls);
          $scope.dragSelectIds.push(el.attr('id'));
        });
      }
      
      function rectangleSelect(selector, x1,x2, y1, y2) {
    var elements = [];
    jQuery(selector).each(function() {
        var $this = jQuery(this);
        var offset = $this.offset();
        var x = offset.left;
        var y = offset.top;
        var w = $this.width();
        var h = $this.height();

        if (x >= x1 && x<=x2 && y>=y1 && y<=y2) {
            // this element fits inside the selection rectangle
            elements.push($this.get(0));
        }
    });
    return elements;
}
      
      function cellsBetween(start, end) {
        
        var bounds = {minX:0,minY:0,maxX:0,maxY:0};
        bounds.minX = $window.Math.min($(start).offset().left,$(end).offset().left);
        bounds.minY = $window.Math.min($(start).offset().top,$(end).offset().top);
        bounds.maxX = $window.Math.max($(end).offset().left+$(end).width(),$(start).offset().left+$(start).width());
        bounds.maxY = $window.Math.max($(end).offset().top+$(end).height(),$(start).offset().top+$(start).height());

        var initiallySelectedTds = rectangleSelect("td",bounds.minX,bounds.maxX,bounds.minY,bounds.maxY);
        
        for(var i=0;i<initiallySelectedTds.length;i++){
          if($(initiallySelectedTds[i]).offset().left<bounds.minX)
            bounds.minX = $(initiallySelectedTds[i]).offset().left;
          if($(initiallySelectedTds[i]).offset().left+$(initiallySelectedTds[i]).width()>bounds.maxX)
            bounds.maxX = $(initiallySelectedTds[i]).offset().left+$(initiallySelectedTds[i]).width();
          if($(initiallySelectedTds[i]).offset().top<bounds.minY)
            bounds.minY = $(initiallySelectedTds[i]).offset().top;
          if($(initiallySelectedTds[i]).offset().top+$(initiallySelectedTds[i]).height()>bounds.maxY)
            bounds.maxY = $(initiallySelectedTds[i]).offset().top+$(initiallySelectedTds[i]).height();
        }
        return rectangleSelect("td",bounds.minX,bounds.maxX,bounds.minY,bounds.maxY);
        
      }
      
    
      function wrap(fn) {
        return function() {
          var el = angular.element(this);
          $scope.$apply(function() {
            fn(el);
          });
        }
      }
      
      $element.delegate('td', 'mousedown', wrap(mouseDown));
      $element.delegate('td', 'mouseenter', wrap(mouseEnter));
      $document.delegate('body', 'mouseup', wrap(mouseUp));
    }
  }
});

[drag-select] {
  cursor: pointer;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

[drag-select] .eng-selected-item {
  background: blue;
  color: white;
}

td {
  padding: 10px;
  border: 1px solid gray;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table drag-select drag-select-ids="ids">
      <tr>
        <td id="td-1-1">1-1</td>
        <td id="td-1-2">1-2</td>
        <td id="td-1-3">1-3</td>
        <td id="td-1-4">1-4</td>
        <td id="td-1-5">1-5</td>
        <td id="td-1-6">1-6</td>
        <td id="td-1-7">1-7</td>
        <td id="td-1-8">1-8</td>
        <td id="td-1-9">1-9</td>
        <td id="td-1-10">1-10</td>
      </tr>
      <tr>
        <td id="td-2-1">2-1</td>
        <td id="td-2-2">2-2</td>
        <td id="td-2-3">2-3</td>
        <td id="td-2-4">2-4</td>
        <td id="td-2-5">2-5</td>
        <td id="td-2-6">2-6</td>
        <td id="td-2-7">2-7</td>
        <td id="td-2-8">2-8</td>
        <td id="td-2-9">2-9</td>
        <td id="td-2-10">2-10</td>
      </tr>
      <tr>
        <td id="td-3-1">3-1</td>
        <td id="td-3-2">3-2</td>
        <td id="td-3-3">3-3</td>
        <td id="td-3-4">3-4</td>
        <td id="td-3-5">3-5</td>
        <td id="td-3-6">3-6</td>
        <td id="td-3-7">3-7</td>
        <td id="td-3-8">3-8</td>
        <td id="td-3-9">3-9</td>
        <td id="td-3-10">3-10</td>
      </tr>
      <tr>
        <td id="td-4-1">4-1</td>
        <td id="td-4-2">4-2</td>
        <td id="td-4-3">4-3</td>
        <td id="td-4-4">4-4</td>
        <td id="td-4-5">4-5</td>
        <td id="td-4-6">4-6</td>
        <td id="td-4-7">4-7</td>
        <td id="td-4-8">4-8</td>
        <td id="td-4-9">4-9</td>
        <td id="td-4-10">4-10</td>
      </tr>
      <tr>
        <td id="td-5-1">5-1</td>
        <td id="td-5-2">5-2</td>
        <td id="td-5-3">5-3</td>
        <td id="td-5-4">5-4</td>
        <td id="td-5-5">5-5</td>
        <td id="td-5-6">5-6</td>
        <td id="td-5-7">5-7</td>
        <td id="td-5-8">5-8</td>
        <td id="td-5-9">5-9</td>
        <td id="td-5-10">5-10</td>
      </tr>
    </table>
    <p>Selected IDs: {{ids | json}}</p>
  </body>

</html>

单元格选择效果很好。选择后，我希望能够选择更多的单元格，而以前的单元格不会消失，并且还能够取消选择已经选择的单元格。

现在基本上每次我点击表格时，以前的选择都会消失，新的开始。

有谁知道我该如何实现它？

最佳答案

只需修改您的setEndCell 函数，

function mouseEnter(el) {
    if (!dragging) return;
    setEndCell(el);
  }


  function setEndCell(el) {
    if (el.hasClass(cls)) { // if added then remove on click
      el.removeClass(cls);
      var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
      elIndex !==-1 && $scope.dragSelectIds.splice(elIndex, 1)
      return false;
    }
    if (!$scope.dragSelectIds) {
      $scope.dragSelectIds = [];
    }
    //$element.find('td').removeClass(cls);
    $(cellsBetween(startCell, el)).each(function() {
      var el = angular.element(this);
      el.addClass(cls);
      // change if added, then not to add twice.
      var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
      elIndex ===-1 && $scope.dragSelectIds.push(el.attr('id'));
    });
  }

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.ids = [];
});

app.directive('dragSelect', function($window, $document) {
  return {
    scope: {
      dragSelectIds: '='
    },
    controller: function($scope, $element) {
      var cls = 'eng-selected-item';
      var startCell = null;
      var dragging = false;

      function mouseUp(el) {
        dragging = false;
      }

      function mouseDown(el) {
        dragging = true;
        setStartCell(el);
        setEndCell(el);
      }

      function mouseEnter(el) {
        if (!dragging) return;
        setEndCell(el);
      }

      function setStartCell(el) {
        startCell = el;
      }

      function setEndCell(el) {
        if (el.hasClass(cls)) {
          el.removeClass(cls);
          var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
          elIndex !==-1 && $scope.dragSelectIds.splice(elIndex, 1)
          return false;
        }
        if (!$scope.dragSelectIds) {
          $scope.dragSelectIds = [];
        }
        //$element.find('td').removeClass(cls);
        $(cellsBetween(startCell, el)).each(function() {
          var el = angular.element(this);
          el.addClass(cls);
          var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
          elIndex ===-1 && $scope.dragSelectIds.push(el.attr('id'));
        });
      }

      function rectangleSelect(selector, x1, x2, y1, y2) {
        var elements = [];
        jQuery(selector).each(function() {
          var $this = jQuery(this);
          var offset = $this.offset();
          var x = offset.left;
          var y = offset.top;
          var w = $this.width();
          var h = $this.height();

          if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
            // this element fits inside the selection rectangle
            elements.push($this.get(0));
          }
        });
        return elements;
      }

      function cellsBetween(start, end) {

        var bounds = {
          minX: 0,
          minY: 0,
          maxX: 0,
          maxY: 0
        };
        bounds.minX = $window.Math.min($(start).offset().left, $(end).offset().left);
        bounds.minY = $window.Math.min($(start).offset().top, $(end).offset().top);
        bounds.maxX = $window.Math.max($(end).offset().left + $(end).width(), $(start).offset().left + $(start).width());
        bounds.maxY = $window.Math.max($(end).offset().top + $(end).height(), $(start).offset().top + $(start).height());

        var initiallySelectedTds = rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);

        for (var i = 0; i < initiallySelectedTds.length; i++) {
          if ($(initiallySelectedTds[i]).offset().left < bounds.minX)
            bounds.minX = $(initiallySelectedTds[i]).offset().left;
          if ($(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width() > bounds.maxX)
            bounds.maxX = $(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width();
          if ($(initiallySelectedTds[i]).offset().top < bounds.minY)
            bounds.minY = $(initiallySelectedTds[i]).offset().top;
          if ($(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height() > bounds.maxY)
            bounds.maxY = $(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height();
        }
        return rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);

      }


      function wrap(fn) {
        return function() {
          var el = angular.element(this);
          $scope.$apply(function() {
            fn(el);
          });
        }
      }

      $element.delegate('td', 'mousedown', wrap(mouseDown));
      $element.delegate('td', 'mouseenter', wrap(mouseEnter));
      $document.delegate('body', 'mouseup', wrap(mouseUp));
    }
  }
});

[drag-select] {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[drag-select] .eng-selected-item {
  background: blue;
  color: white;
}

td {
  padding: 10px;
  border: 1px solid gray;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table drag-select drag-select-ids="ids">
    <tr>
      <td id="td-1-1">1-1</td>
      <td id="td-1-2">1-2</td>
      <td id="td-1-3">1-3</td>
      <td id="td-1-4">1-4</td>
      <td id="td-1-5">1-5</td>
      <td id="td-1-6">1-6</td>
      <td id="td-1-7">1-7</td>
      <td id="td-1-8">1-8</td>
      <td id="td-1-9">1-9</td>
      <td id="td-1-10">1-10</td>
    </tr>
    <tr>
      <td id="td-2-1">2-1</td>
      <td id="td-2-2">2-2</td>
      <td id="td-2-3">2-3</td>
      <td id="td-2-4">2-4</td>
      <td id="td-2-5">2-5</td>
      <td id="td-2-6">2-6</td>
      <td id="td-2-7">2-7</td>
      <td id="td-2-8">2-8</td>
      <td id="td-2-9">2-9</td>
      <td id="td-2-10">2-10</td>
    </tr>
    <tr>
      <td id="td-3-1">3-1</td>
      <td id="td-3-2">3-2</td>
      <td id="td-3-3">3-3</td>
      <td id="td-3-4">3-4</td>
      <td id="td-3-5">3-5</td>
      <td id="td-3-6">3-6</td>
      <td id="td-3-7">3-7</td>
      <td id="td-3-8">3-8</td>
      <td id="td-3-9">3-9</td>
      <td id="td-3-10">3-10</td>
    </tr>
    <tr>
      <td id="td-4-1">4-1</td>
      <td id="td-4-2">4-2</td>
      <td id="td-4-3">4-3</td>
      <td id="td-4-4">4-4</td>
      <td id="td-4-5">4-5</td>
      <td id="td-4-6">4-6</td>
      <td id="td-4-7">4-7</td>
      <td id="td-4-8">4-8</td>
      <td id="td-4-9">4-9</td>
      <td id="td-4-10">4-10</td>
    </tr>
    <tr>
      <td id="td-5-1">5-1</td>
      <td id="td-5-2">5-2</td>
      <td id="td-5-3">5-3</td>
      <td id="td-5-4">5-4</td>
      <td id="td-5-5">5-5</td>
      <td id="td-5-6">5-6</td>
      <td id="td-5-7">5-7</td>
      <td id="td-5-8">5-8</td>
      <td id="td-5-9">5-9</td>
      <td id="td-5-10">5-10</td>
    </tr>
  </table>
  <p>Selected IDs: {{ids | json}}</p>
</body>

</html>

关于javascript - 捕获表格中的多个td元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53260462/

文章推荐： javascript - 当移动标记到达一定latlng时触发事件

文章推荐： c# - 如何引发 MouseClick 事件？

文章推荐： ios - UIScrollView 在 iOS7 上捏合时返回错误

文章推荐： c# - 如何将枚举值保存到数据库？

javascript - 元素 = $(元素);对象预期错误？
在开发中的网页上，我在 IE 上遇到此错误 element = $(element); 此代码位于prototype.js 预期对象如何消除此错误。更新: 现场也使用了 jQuery。最佳答
arrays - 如果元素本身是数组，合并两个数组(元素 + 元素)的最佳方法是什么
我有两个大小相同的嵌套数组: Array1 =[[1, 2], [], [2, 3]] Array2= [[1, 4], [8, 11], [3, 6]] 我需要将它们合并到一个数组中，如下所示: A
jQuery 不适用于
元素，但不适用于元素
我有一些 jQuery 代码，当单击具有特定 ID 的项目时运行。当 ID 是的一部分时，它就可以工作。元素，但当它位于中时则不然元素。为什么会这样呢？我想使用 an，因为如果用户关闭了 Ja
html - 如何制作 flex 元素 block 元素？
Flex-box 规范 3声明 flex 元素不是 block 容器: A flex item establishes a new formatting context for its content
javascript - jquery 在有序堆栈中添加 not-in-dom 元素(in-dom 元素)
我遇到了一个意想不到的问题。 HTML JS $(function() { var $divs = $('.myDiv'); // create new div not in
javascript - 制作
元素 'active' 而不是元素
我使用 Bootstrap 和 Ember.js 得到了一个无序列表。每个列表项都是一个显示新帖子的链接，每当您单击该链接时，Ember 都会添加类 active默认情况下。我正在使用 Bootstr
javascript - 循环遍历 DOM 元素，包括 span 元素
我正在尝试让一个函数正常工作，但运气不佳，所以我想向 Stackoverflow 智囊团提出一个新手问题! 基本上，我有一个表单，并且循环遍历所有元素以查看是否存在自定义数据属性。如果存在，则保持该元
arrays - 是否有内置函数来映射非 nil 元素，并删除数组的 nil 元素？
我想映射一个可选数组，删除那些 nil 值，并使用另一个函数映射非 nil 值。我知道我可以通过使用 compactMap 然后使用常规 map 来实现这一点，但我只想遍历数组一次。我为此实现了一
jquery - 定位 li 元素，除非前面有非 li 元素
我如何定位 li 元素，除非它们出现在之后元素？换句话说，我想针对步骤而不是注释。我尝试向 OL 添加一个我想从选择中排除的类，但我想出的代码不起作用。 (顺便说一句，重构 html 不是一种选
asp.net - 元素 > system.webServer' 有无效的子元素 > 元素 'rewrite'
Warning 1 The element 'system.webServer' has invalid child element 'rewrite'. List of possible eleme
JavaScript 从非结束节点 HTML 元素(例如 LI 元素)获取文本值
我正在尝试编写一个脚本，该脚本将遍历 HTML 源并创建 DOM 的 JSON 文件，然后使用 d3.js 在 TreeView 中显示该文件。我遇到的问题是不仅希望显示元素(TITLE、P、LI 等
jQuery SlideUp 元素 A 如果可见，则 SlideDown 元素 B
我有以下 HTML 表单:- Option 1 Option 2
javascript - 选择 HTML 元素 Jquery 之后的下一个 span 元素
我试图在选定的 HTML 元素之后选择下一个具有类名 slider-value 的 span 元素。我尝试了多种解决方案，但没有一个有效。我可以通过 id 选择它，但我不希望那样做使代码冗余。 $(
javascript - innerHTML 适用于 body 元素，但不适用于 p 元素
如果电子邮件地址无效，我想在屏幕上显示一条消息“请输入有效的电子邮件地址”。 body 元素的innerHTML 语句工作正常，但我用于p 元素的innerHTML 语句不起作用。有一次，当我测试它
javascript - jQuery 显示隐藏的 li 元素，然后隐藏可见的 li 元素
以下 jQuery 代码调用 ul 元素，查找元素内的前三个 li 列表项，并隐藏剩余的 li 项目。然后，它附加一个 li 元素，其中显示“显示更多...”，并且在单击时显示之前隐藏的列表项。 (
html - 如何显示一个 h1 元素，旁边有一个内联元素，下面有一个 p 元素？
我问了a question早些时候关于将编辑/删除链接与 h1 元素内联的最佳方法。我能够通过给出的答案实现这一点，但我现在有额外的要求，我需要在 h1 下方显示一个段落并编辑/删除链接。到目前为止
knockout.js foreach 在表中重复 td 元素，但不重复 tr 元素
我使用 MVC 4 和 knockout.js 库版本 2.1.0 显示从服务器检索到的大量文件的表中的以下摘录。 0)"> 正在正确检索数据，
reactjs - 如何在 React 组件中定位 DOM 元素，或者应该避免一起定位 DOM 元素？
我创建了一个脚本，该脚本在鼠标悬停在父容器上时激活，并且应该将其子元素移离鼠标。我目前已经让它工作了，但是代码的某些部分似乎与 REACT 代码应该是什么样子相矛盾。特别是两个部分。我在渲染函数中使
javascript - 断点不适用于 Button 或 div 元素，但适用于 li 元素
我是 JS 新手，正在尝试理解项目 https://github.com/tastejs/todomvc 的代码请参阅屏幕截图，我尝试对 button X 以及其父元素 div 设置断点，但在这两种
html - 检查哪些样式应用于 MVC 5 元素 View 中的 HTML 元素
例如，假设有一个带有奇特颜色的标记: Something written here 使用 Visual Studio 2017 和 MVC 5 元素，有没有办法检查和定位当前应用了哪些样式，以及负责它

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 捕获表格中的多个td元素