CODEWITHSUNDEEP
javascriptjquerycheckboxjquery-selectors
Fahad
Fahad

Reputation: 403

Highlight table row when check box is checked

Need to highlight the entire row when check box is checked and remove highlight when unchecked. My current code highlights just the check box cell not the entire row. HElp!

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;}

Upvotes: 2

Views: 7665

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

use .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");
    }
  });
});

Upvotes: 5

epascarello
epascarello

Reputation: 207501

The problem here is that when you switch it from closest("td") to closest("tr") it is working [it sets the class], but the CSS is wrong. You need to add the background color to the cell, not the row.

Your CSS

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

Needs to be

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

Notice the TD after highlight.

Upvotes: 5

adeneo
adeneo

Reputation: 318172

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

Upvotes: 8

Related Questions