0

我有一个表，其中所有列都有背景颜色，除了最后一列是复选框。我需要使用 jquery 仅在选中复选框时突出显示单元格，而在未选中时取消突出显示。我不想突出显示整行，因为它看起来不正确，因为背景颜色这就是为什么我只希望 td with 复选框在选中时突出显示。帮助！

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]+',', '');
    }   
}
4

2 回答 2

1

你可以在这里查看演示 

    $(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-16T15:35:19.687 回答
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()函数实现这一点

于 2013-04-16T15:25:18.393 回答