只突出顯示包含複選框的單元格

我有一張表格，其中所有列都有背景色，但最後一列是複選框。我需要使用jquery突出顯示單元格只有當複選框被選中時，取消選中時突出顯示。我不想突出顯示整行，因爲它不會看起來很正確，因爲背景顏色，這就是爲什麼我只想在檢查時突出顯示帶有複選框的td。幫幫我！只突出顯示包含複選框的單元格

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方法添加和刪除css類。 –

謝謝！尤達它的工作，但看到後，我發現整個行需要突出顯示的要求！我該怎麼做，我添加給每個td一個id，這樣整行得到highlihted或有另一種方式來做到這一點？ – 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類，然後用toggleClass()功能實現這一

來源

2013-04-16 15:25:18 tymeJV

只突出顯示包含複選框的單元格

回答

相關問題