html - CSS 和 HTML : mark area of table with mouse tracking

Question

是否有一个示例如何通过跟踪鼠标来选择 html 表格的区域？ 例如我按下鼠标按钮并从第二行和第二列移动到第六行和第五列 - 应该选择该单元格(例如，使用其他背景颜色或虚线边框)，并且无论如何都应该激发哪些单元格的信息选择 -> 2/2 至 6/5。 有没有这种行为的模板或示例？ 我在前端应用程序中使用 HTML、CSS 和 AngularJS - 如果存在基于此的示例，那就太好了。

Answer 1

我认为下面的代码片段就是您正在寻找的内容。它将把 CSS 类 .hightlight 应用于所有需要突出显示的单元格。全局变量range将包含所选范围的两个坐标。

assignEvents();

function assignEvents() {
  var rows = document.getElementsByTagName('tr');
  
  for (let y = 0; y < rows.length; y++) {
    var cells = rows[y].children;
    
    for (let x = 0; x < cells.length; x++) {
      cells[x].onclick = function() {
        cellClick(x, y);
      }
      
      cells[x].onmouseenter = function() {
        mouseEnterCell(x, y);
      }
    }
  }
}

var selecting = false;
var anchor = {"x": 0, "y": 0};
var range = [anchor, anchor];

function cellClick(x, y) {
  var cell = document.getElementsByTagName('tr')[y].children[x];
  
  if (selecting == false) {
    anchor.x = x;
    anchor.y = y;
    
    range = [anchor, anchor];
    
    selecting = true;
  } else {
    selecting = false;
  }
}

function mouseEnterCell(x, y) {
  if (selecting) {
    highlightRange(anchor.x, anchor.y, x, y);
    range = [anchor, {"x": x, "y": y}];
  }
}

function highlightRange(ax, ay, mx, my) {
  var oldRangeHighlights = document.getElementsByClassName('highlight');
  
  while (oldRangeHighlights.length > 0) {
    oldRangeHighlights[0].classList.remove('highlight');
  }
  
  if (mx < ax) {
    var tx = ax;
    
    ax = mx;
    mx = tx;
    
  }
  
  if (my < ay) {
    var ty = ay;
    
    ay = my;
    my = ty;
  }
  
  var w = (mx - ax) + 1;
  var h = (my - ay) + 1; 
  
  for (x = 0; x < w; x++) {
    for (y = 0; y < h; y++) {
      document.getElementsByTagName('tr')[y + ay].children[x + ax].classList.add('highlight');
    }
  }
}

table {
  border-collapse: collapse;
}

td {
  width: 20px;
  height: 20px;
  
  border: 1px solid black;
}

.highlight {
  background-color: yellow;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

说明

在加载文件时调用函数assignEvents()。它获取表的所有行并循环它们。对于每个行，所有单元格都被选择并给出事件。 onclick 用于检测启动或停止选择的点击，onmouseenter 用于更改实时选择。

如果用户当前正在选择一个区域，

selecting 将为 true
anchor 将包含原始点击点的 x 和 y 值
range 将包含由捕获的 anchor x 和 y 以及悬停的 x 和 y onmouseenter 事件

单击单元格时调用

cellClick()。它获取单击的单元格并检查用户当前是否正在选择范围。如果没有，它将启动并定义anchor和range。如果是，则结束选择。

当鼠标进入单元格时调用mouseEnterCell()。如果用户选择一个范围，它将更新实时选择。

highlightRange() 将突出显示给定两个坐标的范围。首先，它删除了所有旧的亮点。它将把 anchor (ax, ay) 设置为顶部最高的位置。然后计算框的宽度 (w) 和高度 (h)。然后它们被选中并被赋予 CSS 类 highlight。

如果需要您需要更改，请直接说。