Question

I have a table with links in the header that hide a range of cells. I want to make cells selectable() using jQueryUI, but hidden cells + selectable() are causing some strange behavior.

Example: http://jsfiddle.net/gvmNv/1/

In Chrome, if the cells are hidden and then selectable() is applied, it looks like some phantom cells are inserted into the table, but they are not in the dom (table 1).

In table 2, the same thing will happen if click to hide the cells and then do a selection.

In IE8, if the cells are hidden, when you select over the hidden cells, the hidden cells are also selected.
Additionally, if a range of cells are selected and then hidden, subsequent selections do not unselect the hidden cells.

I did not see these problems in Firefox 9.

Can anyone explain this? Is there a way to fix it?

Answer 1

Nevermind, I found the fix.

It seems like it should handle hidden elements, but it doesn’t. When setting up selectable(), I need to include :visible.

So…

$("table").selectable({
    filter: 'td:visible'
});​

Example: http://jsfiddle.net/gvmNv/2/