选中复选框时突出显示表格行

Question

选中复选框时需要突出显示整行，并在取消选中时取消突出显示。我当前的代码仅仅突出显示复选框单元格而不是整行。帮帮我！

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;} 

Answer 1

这里的问题是，当它从closest("td")切换到closest("tr")它正在工作[它设置类]，但CSS是错误的。您需要将背景颜色添加到单元格，而不是行。

你的CSS

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

需要是

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

通知的亮点后，TD。

Answer 2

使用.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"); 
    } 
    }); 
}); 

Answer 3

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