只突出显示包含复选框的单元格

我有一张表格，其中所有列都有背景色，但最后一列是复选框。我需要使用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

只突出显示包含复选框的单元格

回答

相关问题