I have a table where i want to change cell background on mouse over and mouse button down, my current solution doesn't work as I want it to :

function ChangeColor(sender) {

    sender.style.backgroundColor = 'yellow';

}

var clicking = false;


$(document).mouseup(function() {
    clicking = false;
});


$(document).ready(function() {
    $('#Table1 tr').each(function() {
        $('td', this).each(function() {
            $(this).mousedown(function() {
                clicking = true;
            });
            $(this).mousedown(function(event) {
                if (clicking==true) { ChangeColor(this); }
            });
        });
    });
});

Is there any way to make it work like that ?

I have a table where i want to change cell background on mouse over and mouse button down, my current solution doesn't work as I want it to :

function ChangeColor(sender) {

    sender.style.backgroundColor = 'yellow';

}

var clicking = false;


$(document).mouseup(function() {
    clicking = false;
});


$(document).ready(function() {
    $('#Table1 tr').each(function() {
        $('td', this).each(function() {
            $(this).mousedown(function() {
                clicking = true;
            });
            $(this).mousedown(function(event) {
                if (clicking==true) { ChangeColor(this); }
            });
        });
    });
});

Is there any way to make it work like that ?

• javascript
• jquery
• dom
• mouseevent

• isnt mouse over and down on an element the same as click or am i missing something? – Pharabus Commented Feb 28, 2010 at 2:00
• I don't rely understand what you're trying to say , mouseover!=click / mousedown=click – Jacob Commented Feb 28, 2010 at 2:04
• 2 it is the combination i am confused about, if you mousedown whilst the mouse is over an element it fires the click event or are you after some kind of drag select? – Pharabus Commented Feb 28, 2010 at 2:33
• yes , you can say I am trying to achieve some kind of drag select, like using paint tool pen while coloring pixels - does that make any sens ? – Jacob Commented Feb 28, 2010 at 9:05
• 1 I've edited my answer. I think it is what you're looking for. – user113716 Commented Feb 28, 2010 at 12:23

1 Answer 1

EDIT: Given your comment above, you could do something like this:

$(document).ready(function() {
    isMouseDown = false

    $('body').mousedown(function() {
        isMouseDown = true;
    })
    .mouseup(function() {
        isMouseDown = false;
    });

    $('Table1 tr td').mouseenter(function() {
        if(isMouseDown)
            $(this).css({backgroundColor:'orange'});
    });
});

This will color the background of the td when you mouseover, but only if the mouse button is down.

Sounds like you just want to change the color when you click. If that's the case, it is much simpler than what you're attempting.

$(document).ready() {

    $('#Table1 tr td').click(function() {
        $(this).css({backgroundColor:'yellow'});
    });

});

This will change the background of the td elements yellow when you click them.

It will be similar to change the color when you mouseover.

EDIT: Just noticed the title of your question.

If you want to trigger a click when you hover...

$(document).ready() {

    $('#Table1 tr td').click(function() {
        $(this).css({backgroundColor:'yellow'});
    })
     .mouseenter(function() {
         $(this).click();
     });

});

...of course, you could eliminate the click in that case and just change the background with the mouseenter event.