Question

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 ?

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.