鼠标拖动时高亮显示单行的表格单元格

Highlighting table cells for a single row on mouse drag

本文关键字：表格单元格单行显示拖动高亮鼠标更新时间：2023-09-26

我要做的是允许用户在拖动鼠标时高亮显示表格中的单元格，就像问答中所述的那样通过拖动选择表格上的单元格

不过，我需要做的是限制拖动/高亮显示效果跨越多个列。例如，用户在哪一列开始拖动事件，他们不能突出显示在该列之外。

有人对如何实现这一目标有什么想法吗？

以另一个问题中的例子为例，你应该给"td"元素一个属性，比如数据行和数据列，然后当有人选择存储当前数据列时，防止用户选择其他具有不同数据列值的列。

我在下面的链接中放入了一个工作代码，您可以将其更改为仅适用于行。

工作示例

您需要使用getAttribute方法：

element.getAttribute("data-col")

当高亮显示第一个时，设置一个布尔值，如isHighlighted=true；然后在实际高亮显示中只需执行

if(isHighlighted == false){
    ///do highlighting
}

当您取消选择第一个框时，只需将布尔值设置为false。