Question

I have written a jQuery function to bind mouseover event on mousedown to get the effect of click and drag to select td’s. I have 10 td’s in a table row. The problem with this code is, If I want to select td’s from 1 to 5 and I do a mousedown on td1 and mouseover till td5, td1 does not get selected (I am checking/unchecking a checkbox) instead it gets selected from td2 to td5. How do I fix it?
Any suggestion is appreciated.

Here is the code:

$("#custom-interval-tbl td").mousedown(function() {
     $('#custom-interval-tbl td').bind('mouseover',function(){
            if($(this).find('input:checkbox').is(':checked')) {
                       $(this).find('input:checkbox').attr("checked", "");
                       $(this).css({background:"white"});
            } else {
                       $(this).find('input:checkbox').attr("checked", "checked");
                       $(this).css({background:"#6D7B8D"});
            }
     });
});

Answer 1

When assigning the mouseover event, it is never activated by the one where the mouse is already down. (Since the mouse is ALREADY over, it will never be called.)

You can force this to be called on the TD you already have selected.

$("#custom-interval-tbl td").mousedown(function() {
     $('#custom-interval-tbl td').bind('mouseover',function(){
            if($(this).find('input:checkbox').is(':checked')) {
                       $(this).find('input:checkbox').attr("checked", "");
                       $(this).css({background:"white"});
            } else {
                       $(this).find('input:checkbox').attr("checked", "checked");
                       $(this).css({background:"#6D7B8D"});
            }
     });
     $(this).mouseover(); // This part will call the mouseover event on your clicked TD
});