JQuery changes the background color of a table row when a check box is selected

Question

I have 5 columns in a table. In column 1 there is a flag name = "strurl1", name = "strurl2", name = "strurl3", etc. If the background color of the table row is selected, then it will change C # f1f1f1 to # e5e5e5.

I tried, but the code is not working.

Core css

.overviewtable tbody tr td { line-height:normal; border-top:1px solid #FFF; border-bottom:1px solid #c4c4c4; height:35px; padding-top:10px; padding-bottom:5px; background-color:#f1f1f1; } .overviewtable tbody tr td.col1 { width:316px; padding-left:15px; border-left:4px solid #FFF; font-size:12px; color:#999999; } 

The columns of the table are called col1, col2, col3, col4 and col5.

Any help? Thanks in advance.

Answer 1

Do you want the row to be highlighted? Use the .closest () method to capture a line item, then add a highlight class to it: http://jsfiddle.net/etVc8/3/

 $(function() { $('td:first-child input').change(function() { $(this).closest('tr').toggleClass("highlight", this.checked); }); }); 

Answer 2

 <input type="checkbox" onclick='highlight(this)'> 1<br> <input type="checkbox" onclick='highlight(this)'> 2<br> <input type="checkbox" onclick='highlight(this)'> 3<br> <script> function highlight(obj){ $(obj).parent().parent().css("background","#000"); } </script> 

Answer 3

I set the background color in the tbody tr td class as shown below:

 .overviewtable tbody tr td { line-height:normal; border-top:1px solid #FFF; border-bottom:1px solid #c4c4c4; height:35px; padding:10px 0 5px 0; background-color:#f1f1f1; } 

If I use the following script, then it only selects col1 , that is, the column containing this flag. I will be col1 to col5 , i.e. the whole line to be highlighted:

 $(function() { $('td:first-child input').change(function() { $(this).closest('table.overviewtable tbody tr td').toggleClass("highlight", this.checked); }); });