have a table 

```
<table>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c2"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
...
</table>

```

and then the js is:

```
$('input:checkbox[name*=tableRow]').click(function(event) {

    var el = $(this);
    if (el.attr('checked')) {
        el.parents('tr').css("background-color", '#ffcccc');
    }
    else {
        el.parents('tr').css("background-color", 'inherit');
    }
    event.stopPropagation();
});

$('input:checkbox[name*=tableRow]').parents('tr').click(function() {
    var el = $(this).find('> td:eq(0) > :checkbox');
    el.click();
});​

```

checkbox checks and unchecks in both ways, but when i click "tr" it looks like event rans before check set.

need: in both ckecks then set css