javascript - using jquery to highlight either tr's or td's -

i have 2 tables:

<table class="highlight_row" id="table1">   <tr id="first_row">     <td><input type="checkbox" id="first">first thing</td>     <td><input type="checkbox" id="second">second thing</td>         <td><input type="checkbox" id="third">third thing</td>   </tr> </table>  <table class="highlight_td" id="table2">   <tr id="second_row">     <td><input type="checkbox" id="fourth">fourth thing</td>     <td><input type="checkbox" id="fifth">fifth thing</td>         <td><input type="checkbox" id="sixth">sixth thing</td>         </tr> </table> 

and trying differenciate them -- when check box in first table, want whole row highlighted, , when check box in second table, want td highlighted.

i able rows highlighted (using addclass() 'selected' color), when specify table class, still whole row second table, when want td (i figure identifying class instead of id better in long run add more tables).

jquery code:

$(".highlight_row").click(function(){   $(":checkbox").change(function() {     $(this).closest("tr").toggleclass("selected", this.checked)   }) }); 

something this fiddle, perhaps?

your html.

css:

.highlight { background: #ff0; } 

js:

$("#table1 input[type=checkbox]").on('click', function () {     $(this).parent().parent().toggleclass('highlight'); });  $("#table2 input[type=checkbox]").on('click', function () {     $(this).parent().toggleclass('highlight'); });