Highlight table row when check box is checked

Question

Need to highlight the entire row when check box is checked and remove highlight when unchecked. My current code highlights just the check box cell not the entire row. HElp!

JSP:

 <tbody> <c:forEach items="${summary}" var="summary"> <tr> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.eventDesc}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><a href="/analysis/loadAnalysisDetailFromSummary?labelNbr=${summary.labelNbr}&loadDate=${summary.loadDate}"><c:out value="${summary.labelNbr}" /> </a> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.origin}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.senderName}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.receiverName}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.receiptDate}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.loadDate}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.forecastIsc}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.actualIsc}" /> </td> <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.country}" /> </td> <td id="td1" bgcolor='<c:out value="${summary.color}"></c:out>'><c:out value="${summary.source}" /> </td> <c:if test="${isAll == 'false'}"> <td align='center' bgcolor='<c:out value="${summary.color}"></c:out>'> <input name='summaryCheckbox' type="checkbox" class="cbx" value='<c:out value="${summary.labelNbr}"></c:out>,<c:out value="${summary.loadDate}"></c:out>, <c:out value="${summary.eventInd}"></c:out>'> </td> </c:if> </tr> </c:forEach> </tbody>

Jquery:

$(document).ready(function(){ $("input[type='checkbox']").change(function(e) { if($(this).is(":checked")){ $(this).closest('td').addClass("highlight"); } else{ $(this).closest('td').removeClass("highlight"); } }); });

CSS:

table{border: 1px solid;} .highlight{background: #C0C0C0;}

Please post the rendered HTML, not whatever that is.

j08691
– j08691

2013-04-16 19:58:52 +00:00
Commented Apr 16, 2013 at 19:58 — j08691
– j08691, Commented Apr 16, 2013 at 19:58

adeneo · Accepted Answer · 2013-04-16 19:45:35Z

8

$(function(){ $("input[type='checkbox']").on('change', function() { $(this).closest('tr').toggleClass("highlight", this.checked); }); });

answered Apr 16, 2013 at 19:45

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

I would do it: $("table tbody").on('change', "input[type='checkbox']", function() { so it attaches to one element, not to every cb.

adeneo Over a year ago

@epascarello - does it really matter for a few elements, or for 20 elements, or even more? Delegation has costs as well, checking every change event in the table to see if it originates from a checkbox or not.

Fahad Over a year ago

Thanks! Ive tried using .closest('tr') but it didnt work thats why I posted this question. I also tried using parents() but that didnt work either.

epascarello · Accepted Answer · 2013-04-16 19:56:43Z

The problem here is that when you switch it from closest("td") to closest("tr") it is working [it sets the class], but the CSS is wrong. You need to add the background color to the cell, not the row.

Your CSS

table{border: 1px solid;} .highlight{background: #C0C0C0;}

Needs to be

table{border: 1px solid;} .highlight td {background: #C0C0C0;}

Notice the TD after highlight.

Adil Shaikh · Accepted Answer · 2013-08-19 08:05:26Z

use .closest('tr')

$(document).ready(function(){ $("input[type='checkbox']").change(function(e) { if($(this).is(":checked")){ $(this).closest('tr').addClass("highlight"); }else{ $(this).closest('tr').removeClass("highlight"); } }); });

Thanks! Ive tried using .closest('tr') but it didnt work thats why I posted this question. I also tried using parents() but that didnt work either.

Collectives™ on Stack Overflow

Highlight table row when check box is checked

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related