1

チェックボックスがオンの場合は行全体を強調表示し、オフの場合は強調表示を削除する必要があります。現在のコードでは、行全体ではなく、チェック ボックスのセルだけが強調表示されます。ヘルプ！

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>

Jクエリ:

$(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;}
4

3 に答える 3

5

使用する.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");
    }
  });
});
于 2013-04-16T19:41:26.103 に答える