Question

I guess you all know how tables look like in phpmyadmin (I’m talking about the html tables which show the structure and data of the SQL tables). I’m looking to add a similar functionality to my html tables in which if the user clicks the table row, a checkbox on the left of the table would be checked, and if they click it again, the checkbox would turn to the default state which is unchecked, just like in phpmyadmin interface. Also tr color should change upon row click and change again to the default color specified by the css after the second click, again the same way it works in phpmyadmin.

Answer 1

Very simple: http://jsfiddle.net/ZBF2r/2/

First the hover effect:

$('tr').bind('mouseover mouseout', function() {
    $(this).toggleClass("hover");
});

Then the click effect:

$('tr').bind('click', function() {
    $(this).toggleClass("active");

And then toggle the checkbox:

    $(this).find("input[type=checkbox]").prop("checked",
        (!$(this).find("input[type=checkbox]").prop("checked"))
    );
});