Events dependent on each other in jQuery

Question

I have to create a table with cells on which by clicking I have to give a parameter some value dependent on all the cells that are clicked

If it had been a single cell I can do this by click function in jquery. But It is possible that user can choose multiple cells and in return the parameter should be updated if the chosen cells are adjacent to each other and should prompt the user if the chosen cells are not adjacent.

It seems to be very complicated. How do I accomplish this in jQuery?

Update:

This table is a calendar like application with time and venue as rows and colums.Each cell in a row represents a 1hour time slot. Users can choose multiple 1 hr time slots that can make a single bigger slot(say a 3 hr slot) in order to create an event in the table that spans over this timeslot.

Answer 1

For table cells to the left and right, you can use jQuery's functions .next() and .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
}
...

For table cells to the top and bottom, you'll need to first get the current cell's index value, then check the cell's parent's siblings for the same table cell index (assuming you have a simple table structure with no multi-row or -column cells):

var index = this.index();
if (adjacent = this.parent().prev().get(index)) {
    // Process the top sibling of the current cell
}

Answer 2

This is a pretty good working example. You monitor mouse down/up events to determine what cells the user has dragged the mouse over. You then add a class so that you know which ones they are. In addition you add a class to the parent row.

Then when mouse up occurs you check to see whether multiple rows have been activated. If so then tr.active will be greater than one.

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');
    }
});​