체크 상자가 포함 된 셀만 강조 표시합니다.

모든 열에 확인란이있는 마지막 열을 제외한 배경색이있는 테이블이 있습니다. 확인란을 선택한 경우에만 jquery를 사용하여 셀을 강조 표시하고 선택하지 않으면 강조 표시를 해제해야합니다. 그 이유는 배경색 때문에 배경이 제대로 보이지 않기 때문에 전체 행을 강조 표시하고 싶지 않습니다. 그 이유는 선택했을 때 강조 표시 할 확인란 만있는 이유입니다. 도움!체크 상자가 포함 된 셀만 강조 표시합니다.

JSP :

<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 bgcolor='<c:out value="${summary.color}"></c:out>'> 
    <c:outvalue="${summary.source}" /> 
      </td> 
<c:if test="${isAll == 'false'}"> 
<td align='center'></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>

JS :

$('input[name=summaryCheckbox]:checkbox').unbind("click").click(summaryCheckboxHandler); 
    function summaryCheckboxHandler(){ 
    var val = $(this).val(); 
    var vals = val.split(","); 
    if($(this).is(":checked")){  
     labelNbrs += vals[0] + ','; 
     loadDates += vals[1] + ','; 
     eventInd = vals[2]; 
    }else{ 
     labelNbrs = labelNbrs.replace(vals[0]+',', ''); 
     loadDates = loadDates.replace(vals[1]+',', ''); 
    } 
}

출처

2013-04-16 Fahad

당신은 demo here

$(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: red;}

출처

2013-04-16 15:35:19

당신은 또한 내부에있는 체크 박스를 대상으로 구체적으로 말할 수있다 확인할 수 toggleClass() 기능이 달성 또한 toggleClass 메소드를 사용하여 css 클래스를 추가 및 제거 할 수 있습니다. –

감사! Yoda 그것은 작동했지만 요구 사항을 살펴본 후에 전체 행을 강조 표시해야한다는 것을 알았습니다! 나는 어떻게 할 것인가? 나는 각각의 td에게 id를 부여하여 전체 행이 높아지거나 다른 방법으로 그것을 할 수있게 하는가? – Fahad

죄송합니다, 나는 떨어져있었습니다. 가장 가까운 곳에서 td를 tr로 바꾸면 DOM에서 가장 가까운 tr을 검색합니다. –

당신은 부모 TD 대상과 배경 색상으로 설정할 수 있습니다

if($(this).is(":checked")){  
    labelNbrs += vals[0] + ','; 
    loadDates += vals[1] + ','; 
    eventInd = vals[2]; 
    $(this).parent("td").css("background", "color"); // <-- I would prefer making a CSS class called "active" then using the toggleClass(). 
} else { 
    labelNbrs = labelNbrs.replace(vals[0]+',', ''); 
    loadDates = loadDates.replace(vals[1]+',', ''); 
    $(this).parent("td").css("background", "color");

}

나는, 말을 위의 의견, C 사용을 고려하십시오. "활성"라는 SS 클래스 다음

출처

2013-04-16 15:25:18 tymeJV

체크 상자가 포함 된 셀만 강조 표시합니다.

답변

관련 문제