Highlighting table cells for a single row on mouse

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?

Answer 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.

Answer 2

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")