Question

我有一个带可选单元格的表格（通过jQuery-UI可选）。通过cmd / ctrl-click和套索单独选择单元格。选定的单元格获得“ui-selected”类。我通过在该类中添加1像素厚的橙色边框来设置选择的样式。当选择连续的细胞时，这看起来很愚蠢。请看这个小提琴：http://jsfiddle.net/derekprior/UxwD4/

我想要做的是仅在未选择相邻单元格的两侧绘制橙色边框。通过邻居我的意思是同一行和上下行。结果应该是围绕entre连续选择的单一轮廓。

这可以用纯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

这不能用纯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 Fiddle demo

Answer 3

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 4

这只能使用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');
            }
        });
    }
});

样式连续选择的表格单元格

4 个答案: