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

Question

[Антон Шаманов]

Есть таблица 10х10, как выделить несколько ячеек за 1 клик? Т.е. нажимаем мышь, передвигаем курсор и все ячейки под курсором выделяются.

Comments

[DevMan]

Антон Шаманов разверните вопрос: что означает "выделить несколько ячеек"?

Answer 1

[Денис]

Делал я когда-то подобное, но задача была сделать выделение ячеек, как при одиночном нажатии, так и при зажатом 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;
});

Comments

[Антон Шаманов]

Не совсем получилось - выделение по вертикали не работает

[Денис]

Антон Шаманов собственно, я и думал, что вам нужно выделять диапазон всех ячеек от той, на которой была зажата клавиша и до той, на которую зашел курсор. Хотя, судя по комментариям на соседний ответ, вам нужно было совсем другое - что-то вроде рисования по ячейкам, а мой код направлен немного в другую сторону.

[Антон Шаманов]

Денис: Ну да, хотя главный минус вашего варианта в моем случае в том, что у меня выделение ячеек идет по вертикали (строки - часы, столбцы - дни, выделяем интервал часов в определенный день). Но все равно спасибо, мой косяк - не до конца сформулировал предметную область.

[Денис]

Антон Шаманов давайте еще так попробуем.

[Антон Шаманов]

Денис: да, спасибо - пойду в коде разбираться

Answer 2

[Elwen]

Если достаточно добавить класс к ячейкам, то можно так:

$('td')
  .mousedown(function(){
    $(this).toggleClass('selected');
    $('td').on('mouseenter',function(){
      $(this).toggleClass('selected');
    });
  })
  .mouseup(function(){
    $('td').off('mouseenter');
  });

Пример на jsfiddle

Comments

[Антон Шаманов]

Возникает баг - начинает выделять не только при клике но и просто при наведении курсора на ячейку. Не могу отловить условия его появления.

[Антон Шаманов]

Возникает при выделении наискосок - если поводить круги по таблице, то потом ячейки будут выделяться без клика