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

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