Question

I have a table with selectable cells (via jQuery-UI selectable). Cells are selected individually, via cmd/ctrl-clicking, and via lasso. Selected cells get the “ui-selected” class. I style the selection by adding a 1 pixel thick orange border to that class. This looks silly when contiguous cells are selected. Please see this fiddle to play with it: http://jsfiddle.net/derekprior/UxwD4/

What I’d like to do is draw the orange border only on sides where the neighboring cell is not also selected. By neighboring I mean both in the same row and in the row above and below. The result should be a single outline around the entre contiguous selection.

Can this be done with pure CSS? CSS3 selectors are fair game provided they are supported well enough in Firefox, Chrome, and Safari. If not, how about Javascript?

Answer 1

http://jsfiddle.net/UxwD4/14/

$(function(){

    $("tbody").selectable({
        filter: 'td:not(.user)',
        stop: doIt
    });

    var cssClass = "ui-selected";
    var withBorder = "1px solid #F39814";
    var noBorder = "1px solid #dddddd";

    function doIt(){        
        $("td").css("border", noBorder);

        $("td." + cssClass).each(function(){
            var $this = $(this);
            var col = $this.index();

            $this.css("border", withBorder);

            if($this.prev().hasClass(cssClass)){
                 $this.css("border-left", noBorder);
            }

            if($this.next().hasClass(cssClass)){
                 $this.css("border-right", noBorder);
            }

            if($this.parent()
                   .prev()
                   .children().eq(col)
                   .hasClass(cssClass)){

                    $this.css("border-top", noBorder);
            }

            if($this.parent()
                   .next()
                   .children().eq(col)
                   .hasClass(cssClass)){

                    $this.css("border-bottom", noBorder);
            }
        });
    }

});