Styling adjacent selected table cells

Question

I have a table with selectable cells (using jQuery-UI). Cells are selected individually, via cmd / ctrl-click and through lasso. Selected cells get the ui-selected class. I customize the selection by adding a 1 pixel orange frame to this class. It looks silly when adjacent cells are selected. See this script to play with it: http://jsfiddle.net/derekprior/UxwD4/

What I would like to do is draw an orange frame only on the sides where the neighboring cell is also not selected. By neighboring I mean both in the same row, and in the line above and below. The result should be a single contour around the continuous selection of entre.

Can this be done using pure CSS? CSS3 selectors are fair game, provided that they are well supported in Firefox, Chrome and Safari. If not, what 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); } }); } }); 

Answer 2

This cannot be done using pure CSS (at least not without manipulating JavaScript), but with jQuery (since you already use the jQuery user interface library):

 $('td').click( function(){ if ($(this).prev('td').hasClass('ui-selected')){ $(this).css('border-left-color','transparent'); $(this).prev('td').css('border-right-color','transparent'); } else if ($(this).next('td').hasClass('ui-selected')){ $(this).css('border-right-color','transparent'); $(this).next('td').css('border-left-color','transparent'); } }); 

JS Fiddle demo .

Answer 3

http://jsfiddle.net/LuckyKind/3pXyX/

More CSS, much less jQuery

 td { padding:1px } td.ui-selecting { background: #FECA40 !important; } td:not(.ui-selected) + .ui-selected { border-left: 1px solid #F39814 !important; } .ui-selected + td:not(.ui-selected) { border-left: 1px solid #F39814 !important; } tr.row-selected + tr.row-selected td.ui-selected { border-top: 1px solid #ddd !important; } tr:not(.row-selected) + tr.row-selected td.ui-selected { border-top: 1px solid #F39814 !important; } tbody > tr.row-selected:first-child td.ui-selected { border-top: 1px solid #F39814 !important; } tr.last-row-selected td.ui-selected { border-bottom: 1px solid #F39814 !important; } 

Then jQuery ...

 $("tbody").selectable({ filter: 'td:not(.user)', start: function(){ $('tr.last-row-selected').removeClass('last-row-selected'); }, stop: function(){ $('td.ui-selected:last',this).parent().addClass('last-row-selected'); $('tr.row-selected',this).removeClass('row-selected'); $('td.ui-selected',this).parent().addClass('row-selected'); } }); 

Answer 4

This can only be done using JavaScript. The selected event should be used to determine the end of the selection. Then check if the previous / next row / cell has the selected class. If so, add a class to work with the appropriate border.

Look at the code, I used descriptive names.

Fiddle: http://jsfiddle.net/UxwD4/11/
CSS:

 .ui-border-top { border-top: #eee; } .ui-border-right { border-right: #eee; } .ui-border-bottom { border-bottom: #eee; } .ui-border-left { border-left: #eee; } 

JavaScript:

 $("tbody").selectable({ filter: 'td:not(.user)', selected: function(){ $('td.ui-selectee', this).each(function(){ var cell = $(this), row = cell.parent(), cellIndex = cell.index(); cell.removeClass('ui-border-top ui-border-right ui-border-bottom ui-border-left'); if (cell.hasClass('ui-selected')) { var up = row.prev().children().eq(cellIndex).hasClass('ui-selected'), right = cell.next().hasClass('ui-selected'), down = row.next().children().eq(cellIndex).hasClass('ui-selected'), left = cell.prev().hasClass('ui-selected'); if (up) cell.addClass('ui-border-top'); if (right) cell.addClass('ui-border-right'); if (down) cell.addClass('ui-border-bottom'); if (left) cell.addClass('ui-border-left'); } }); } });