鼠标拖动时高亮显示表格单元格为一行 [英] Highlighting table cells for a single row on mouse drag

问题描述

我要做的是允许用户在将鼠标拖动到表格上时突出显示表格中的单元格，这在问答中概述了

What I am trying to do is allow the user to highlight cells in a table when they drag the mouse over them, very much as outlined in the question and answer Select Cells On A Table By Dragging

我需要做的是限制拖动/突出显示效果跨越一列以上.例如用户在哪一列中开始拖动事件，因为他们无法突出显示该列的另一侧.

What I need to do though is restrict the drag / highlight effect from spanning more than one column. e.g. which ever column the user start the drag event in they cant highlight out side that column.

有人对如何实现这一目标有任何想法吗?

Anyone have any ideas on how to achieve this?

推荐答案

以另一个问题中的示例为例，您应为"td"元素赋予一个属性，例如data-row和data-col，然后在有人正在选择存储当前数据列，并防止用户选择其他具有不同数据列值的列.

Taking the example that is in the other question, you should give the "td" element an attribute, like data-row and data-col, then when somebody is selecting store the current data-col and prevent that the user can select other columns with diferent data-col value.

我在下面的链接中添加了工作代码，您可以将其更改为仅适用于行.

I put a working code in the following link, you can change it to only works with the rows.

工作示例

您需要使用getAttribute方法:

You need to use the getAttribute method:

element.getAttribute("data-col")

这篇关于鼠标拖动时高亮显示表格单元格为一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！