Оформление смежно выбранных ячеек таблицы

Question

У меня есть таблица с выбираемыми ячейками (выбирается через jQuery-UI). Клетки выбираются индивидуально, с помощью cmd / ctrl-click и с помощью лассо. Выбранные ячейки получают класс «ui-selected». Я оформляю выделение, добавляя к этому классу оранжевую рамку толщиной 1 пиксель. Это выглядит глупо, когда выбраны смежные клетки. Пожалуйста, посмотрите эту скрипку, чтобы поиграть с ней: http://jsfiddle.net/derekprior/UxwD4/

Что я хотел бы сделать, так это нарисовать оранжевую рамку только на сторонах, где соседняя ячейка также не выделена. Под соседним я подразумеваю как в одном ряду, так и в ряду сверху и снизу. Результат должен быть одним контуром вокруг смежного выделения.

Можно ли это сделать с помощью чистого CSS? Селекторы CSS3 являются честной игрой, если они достаточно хорошо поддерживаются в Firefox, Chrome и Safari. Если нет, то как насчет 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

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

Намного больше CSS, намного меньше 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;
}

Тогда 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 3

Это можно сделать только с помощью JavaScript. Событие selected должно использоваться для определения конца выбора. Затем проверьте, имеет ли предыдущая / следующая строка / ячейка класс selected. Если это так, добавьте класс для работы с соответствующей границей.

Посмотрите на код, я использовал описательные имена.

Скрипка: 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');
            }
        });
    }
});

Answer 4

Это невозможно сделать с помощью чистого CSS (по крайней мере, без манипуляций с JavaScript), но с помощью jQuery (поскольку вы уже используете библиотеку jQuery UI):

$('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Скрипка демо .