Question

Im trying to target elements inside of a table with the class ‘.income_table’. I want to toggle/untoggle a highlighted background color each time a element gets clicked. This isn’t working:

<script>
 $(document).ready(function(){
    $(".income_table tr").click(function () {
        $(this).toggleClass("toggled_tr");
     });
 });
</script>

Is there a problem with my code?

Answer 1

Works for me : http://jsfiddle.net/mplungjan/xBzPW/

<style>
.income_table { background-color:red }
.toggled_tr { background-color:yellow }
</style>
<script>
$(document).ready(function() {
  $(".income_table tr").click(function () {
   $(this).toggleClass("toggled_tr");
  });
});
</script>

<table class="income_table">
    <tr>
        <td>Row 1 cell 1</td>
        <td>Row 1 cell 2</td>
    </tr>
    <tr>
        <td>Row 2 cell 1</td>
        <td>Row 2 cell 2</td>
    </tr>
</table>