Yohn Yohn - 1 year ago 70
jQuery Question

Table select / deselect cells on click and mouseover without ui

What I'm trying to do is a few things. but I created a fiddle to demonstrate whats happening -> http://jsfiddle.net/yohn/tDcgD/ and just so people know, some code came from https://github.com/stevedev/jquery.table_select.js.

You can click on a cell within the table and drag, it should highlight the cells and keep them in the respective grid view, but whenever I go back while within the same mousedown event I want it to unselect the recently selected cells, and I've been having the hardest time trying to get that right.. Looking for how it works within word in a way when you're creating a new table.

I know the fix would be dealing within the following loop, but I can't get it right..

for (y = start_y; y <= end_y; y++){
for (x = start_x; x <= end_x; x++){
table.find('tr:eq('+y+')').find('td:eq('+x+')').each(function (i,o) {
var th = $(this)
if(th.hasClass('selectable')){
if(th.hasClass('recent')){} else {
th.toggleClass("selected").addClass('recent')
}
}
});
}
}


Any help would be much appreciated.

Answer Source

I believe, this is what you are after. Here is the updated fiddle

If you look at .delegate('td.selectable', 'mouseover', function (), I've added the following piece of code.

else
{                             
    $('.recent').removeClass('recent').removeClass('selected')
}

Basically if mouse is clicked (mousedown) and hovered (that is when 'recent' class is present) initially clear the 'recent' and 'selected' classes from the elements. Rest of the logic will take care of the rendering/ filling of the calculated grid.

This should address your question. However you may need to look into other things according to your needs.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download