选中复选框时突出显示表格行

Question

选中复选框时需要突出显示整行，未选中时删除突出显示。我当前的代码仅突出显示复选框单元格而不是整行。救命！

JSP：

 <tbody>
<c:forEach items="${summary}" var="summary">

<tr>
<td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.eventDesc}" />
</td>
 <td bgcolor='<c:out value="${summary.color}"></c:out>'><a
                href="/analysis/loadAnalysisDetailFromSummary?labelNbr=${summary.labelNbr}&loadDate=${summary.loadDate}"><c:out
                        value="${summary.labelNbr}" /> </a>
            </td>

        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.origin}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.senderName}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.receiverName}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.receiptDate}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.loadDate}" />
            </td>
        <td bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.forecastIsc}" />
            </td>
        <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 id="td1" bgcolor='<c:out value="${summary.color}"></c:out>'><c:out
                    value="${summary.source}" />
            </td>
<c:if test="${isAll == 'false'}">
    <td align='center' bgcolor='<c:out value="${summary.color}"></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>
        </tr>

    </c:forEach>
</tbody>  

jquery：

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

Answer 1

这里的问题是，当您将它从 closest("td") 切换到 closest("tr") 时，它正在工作 [它设置了类]，但 CSS 是错误的。您需要将背景颜色添加到单元格，而不是行。

你的 CSS

table{border: 1px solid;} 
.highlight{background: #C0C0C0;}

需要

table{border: 1px solid;} 
.highlight td {background: #C0C0C0;}

注意高亮后的 TD。

Answer 2

$(function(){
    $("input[type='checkbox']").on('change', function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
    });
});

Answer 3

使用.closest('tr')

$(document).ready(function(){
  $("input[type='checkbox']").change(function(e) {
    if($(this).is(":checked")){ 
      $(this).closest('tr').addClass("highlight");
    }else{
      $(this).closest('tr').removeClass("highlight");
    }
  });
});