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가 잘못되었습니다. 행이 아닌 셀에 배경색을 추가해야합니다.

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

귀하의 CSS는

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