在鼠标拖动时，为单行突出显示表格单元格

11 浏览
0 Comments

在鼠标拖动时，为单行突出显示表格单元格

我正在尝试让用户在表格上拖动鼠标时可以突出显示单元格，就像在问题和答案Select Cells On A Table By Dragging中所概述的那样。

但我需要限制拖动/突出显示效果不能跨越多个列。例如，无论用户在哪一列开始拖动事件，他们都不能突出显示该列之外的单元格。

有没有什么想法可以实现这个？

0

2 答案

0 Comments

问题的出现原因是当用户拖动鼠标来选择表格行时，无法只高亮显示选择的行，而是会高亮显示整个表格。

解决方法是给表格的每个单元格元素添加一个属性，例如data-row和data-col，然后在用户选择行时存储当前的data-col值，并阻止用户选择具有不同data-col值的其他列。可以通过以下代码来获取data-col的值：element.getAttribute("data-col")。

为了解决问题，可以参考下面的工作示例链接进行更改，使其只适用于行而不是整个表格：Working example。

0
0 Comments

当您高亮第一个单元格时，设置一个布尔变量，例如isHighlighted = true;然后在实际的高亮操作中只需进行以下判断：

if(isHighlighted == false){
    // 进行高亮操作
}

当您取消选择第一个单元格时，只需将布尔变量设置为false。

0