Question

我有一张表，其中所有列都有背景颜色，但最后一列是复选框。我需要使用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]+',', '');
    }   
}

Answer 1

您可以定位父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");

}

正如我在上面的评论中所说，考虑使用名为“active”的CSS类，然后使用toggleClass()函数实现此功能

Answer 2

您可以查看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;}

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

2 个答案: