• Как выделить несколько ячеек таблицы?

    Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Делал я когда-то подобное, но задача была сделать выделение ячеек, как при одиночном нажатии, так и при зажатом Shift или Ctrl. Если такой вариант устроит, то вот пример в песочнице.
    Показать код jQuery
    var td = $('#timeGrid td'),
        selection = {
            single: function(el) {
                td.not(el).removeClass(this.cl);
                this.ctrl(el);
            },
            shift: function(el) {
                if (typeof this.last !== 'number') {
                    return this.single(el);
                }
                var till = $(el).index(this.slcr),
                    from = this.last;
                if (from > till) till = [from, from = till][0];
                td.not(td.eq(this.last)).removeClass(this.cl);
                td.slice(from, till).add(el).addClass(this.cl);
            },
            ctrl: function(el) {
                $(el).addClass(this.cl);
                this.last = $(el).index(this.slcr);
                console.log(this.last);
            },
            slcr: '#timeGrid td',
            cl: 'pressedTime',
            last: null
        };
    td.on('click', function(e) {
        method = !e.shiftKey && !e.ctrlKey ? 'single' : (e.shiftKey ? 'shift' : 'ctrl');
        selection[method](this);
    });



    P.S. Хотя, сейчас немного доделал и вроде бы получилось, как вы хотели. Смотрим пример

    Показать код jQuery
    var table = $('#timeGrid'),
        td = $('td', table),
        selection = {
            single: function(el) {
                td.not(el).removeClass(this.cl);
                this.ctrl(el);
            },
            shift: function(el) {
                if (typeof this.last !== 'number') {
                    return this.single(el);
                }
                var till = $(el).index(this.slcr),
                    from = this.last;
                if (from > till) till = [from, from = till][0];
                td.not(td.eq(this.last)).removeClass(this.cl);
                td.slice(from, till).add(el).addClass(this.cl);
            },
            ctrl: function(el) {
                $(el).addClass(this.cl);
                this.last = $(el).index(this.slcr);
            },
            slcr: '#timeGrid td',
            cl: 'pressedTime',
            last: null
        };
    var pressed = false;
    td.on({
        mousedown: function(e) {
            method = !e.shiftKey && !e.ctrlKey ? 'single' : (e.shiftKey ? 'shift' : 'ctrl');
            selection[method](this);
            pressed = true;
        },
        mouseenter: function() {
            if (pressed) {
                selection.shift(this);
            }
        }
    });
    $(document).on('mouseup', '*', function(e) {
        pressed = false;
    });

    Ответ написан
    5 комментариев