chnage background of only clicked tr

by katalin_2003

HTML

<table border="1">
    <thead>
        <th>X</th>
        <th>Coll 1</th>
        <th>Coll 2</th>
        <th>Coll 3</th>
    </thead>
    <tr>
        <td><input type="checkbox"></td>
        <td>Dataset 1</td>
        <td>Dataset 1</td>
        <td>Dataset 1</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Dataset 2</td>
        <td>Dataset 2</td>
        <td>Dataset 2</td>
    </tr>
</table>

CSS

tr td {
    background:#ccc;
    padding: 5px;
}
tr.hover td {
    background: orange;
}
tr.active td {
    background: lightgreen;
}

JavaScript

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


// chnage background of only clicked tr
//$('tr').bind('click', function() {
$('tr').on('click', function() {
    //$("table").children('td').removeClass();
    $('tr').not("tr.active td").removeClass("active");
    $(this).toggleClass("active");
  /*  if (event.target.type !== 'checkbox') {
        $(this).find("input[type=checkbox]").prop("checked", (!$(this).find("input[type=checkbox]").prop("checked")) );
    }*/
});