Highlighting table cells for a single row on mouse drag

Question

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?

Use an `if` statement? Get column on first mouseDown event and only apply drag event to elements in the same column... — XCS, Jul 05 '13 at 12:53

daver · Accepted Answer · 2013-07-05T13:14:32.933

3

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.

Working example

You need to use the getAttribute method:

element.getAttribute("data-col")

edited Jul 05 '13 at 13:14

answered Jul 05 '13 at 13:06

daver

445
5
12

That doesn't restrict the highlighting to the first column you select. You can highlight the whole table by dragging. – Reinstate Monica Cellio Jul 05 '13 at 13:09

score -1 · Answer 2 · answered Jul 05 '13 at 13:15

-1

When you highlight the first one, set a boolean, like isHighlighted = true; Then in your actual highlighting just do

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

WHen you deselect the first box simply set the boolean to false.

answered Jul 05 '13 at 13:15

user2550807

90
6

Highlighting table cells for a single row on mouse drag

2 Answers2

Linked