2012-02-21 3 views
1

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

Если бы это была одна клетка я можно сделать это с помощью функции click в jquery. Но возможно, что пользователь может выбрать несколько ячеек, а взамен параметр должен быть обновлен, если выбранные ячейки смежны друг с другом и должны спросить пользователя, если выбранные ячейки не смежны.

Это кажется очень сложным. Как это сделать в jQuery?

Обновление:

Эта таблица календарь, как с применением времени и места в качестве строк и colums.Each ячейки в строке представляет 1hour временной интервал с. Пользователи могут выбирать несколько временных интервалов продолжительностью 1 час, которые могут сделать один большой слот (например, слот 3 часа), чтобы создать событие в таблице, которое охватывает этот временной интервал.

+2

Я просто не знаю, что вы просите. Вы можете уточнить? Возможно, покажите свой стол и какой-нибудь JS-код? –

+0

Надеюсь, на этот раз я буду чист. –

+0

Как выглядит таблица, и что определяет смежные ячейки. Будут ли они всегда находиться в одной строке или могут ли ячейки охватывать несколько строк? – Anurag

ответ

0

Это довольно хороший рабочим пример. Вы отслеживаете события мыши вниз/вверх, чтобы определить, какие ячейки пользователь перетащил мышью. Затем вы добавляете класс, чтобы вы знали, какие они есть. Кроме того, вы добавляете класс в родительскую строку.

Затем, когда мышь вверх, вы проверяете, активировано ли несколько строк. Если это так, tr.active будет больше одного.

http://jsfiddle.net/mrtsherman/bCcbZ/

var mousedown = false; 

$(document).mousedown(function() { 
    mousedown = true; 
}); 

$(document).mouseup(function() { 
    mousedown = false; 
    if ($('tr.active').length > 1) { 
     alert('separate rows'); 
    } 
    else { alert('same row'); } 

    $('.active').removeClass('active'); 
}); 

$('td').mousedown(function() { 
    $(this).addClass('active').parent().addClass('active'); 
}); 

$('td').mouseover(function() { 
    if (mousedown) { 
     $(this).addClass('active').parent().addClass('active'); 
    } 
});​ 
+0

Thats служит моей цели. Было бы здорово, если это можно сделать с событиями щелчка. –

+0

@KamalReddy - Просто поменять место в событии click. На самом деле это намного проще. http://jsfiddle.net/mrtsherman/bCcbZ/1/ – mrtsherman

0

Для ячеек таблицы слева и справа, вы можете использовать функции JQuery в .next() и .prev():

var adjacent; // Stores an adjacent node, if it exists 
if (adjacent = this.next()) { // Returns false if it doesn't exist 
    // Process the next sibling of the current cell 
} 
... 

Для ячеек таблицы в верхней и нижней части, вам нужно сначала получить значение индекса текущей ячейки , а затем проверить брат родителя клетка для того же индекс ячейки таблицы (предполагается, что у вас есть простая структура таблицы с не многорядными или -column клеток):

var index = this.index(); 
if (adjacent = this.parent().prev().get(index)) { 
    // Process the top sibling of the current cell 
} 
Смежные вопросы