CODEWITHSUNDEEP
jqueryhtmlcss
tonyf
tonyf

Reputation: 35539

Highlight Row in a Table

I have the following HTML/jQuery code and am trying to highlight a row in my table when a checkbox is clicked, but unfortunately I can't seem to get it going.

See code below:

<style type="text/css">
.highlight {
    background-color: yellow;
}
</style>

<tr>
  <td class="t12datavalue" align="center" style=""><input type="checkbox" value="123" name="f01"></td>
  <td class="t12datavalue" style="">123</td>
  <td class="t12datavalue" style="">333</td>
  <td class="t12datavalue" style="">Alex</td>
  <td class="t12datavalue" style="">Smith</td>
</tr>

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $('td input[type="checkbox"]').click(function() {
        if ($(this).is(':checked')){
             $(this).parent().parent().addClass('highlight');
        } else if($(this).parent().is('.highlight')) {
             $(this).parent().parent().removeClass('highlight');
        }
    }); 
  }); 
</script>

Upvotes: 0

Views: 2511

Answers (6)

Levi Morrison
Levi Morrison

Reputation: 19552

Edit: The request by tonsils.

Edit: Box9 topped this anyway. Clever devil.

Take a look-see at this jsFiddle. Bam, we have color highlighting and sweet, short jQuery.

In case you don't want to click, here's the aforementioned sexy jQuery:

$(document).ready(function() {
    $('td :checkbox').change(function() {
        $(this).closest('tr').toggleClass('highlight');
    }); 
});

Upvotes: 3

Zen Pak
Zen Pak

Reputation: 578

If you wanted to follow your example above, you're actually missing an additional parent():

$(document).ready(function() { $('td input[type="checkbox"]').click(function() { if ($(this).is(':checked')){ $(this).parent().parent().parent().addClass('highlight'); } else if($(this).parent().parent().parent().is('.highlight')) { $(this).parent().parent().parent().removeClass('highlight'); } }); });

NOTE: you could use the .html() jquery function on an element to determine what they contained. In my case, I used this:

alert($(this).parent().parent().parent().html());

Upvotes: 0

David Tang
David Tang

Reputation: 93664

A refinement on the ideas in other answers:

$('td :checkbox').bind('change click', function () {
    $(this).closest('tr').toggleClass('highlight', this.checked);
}).change();

The reason I bind to both change and click events is because change incorrectly fires after the checkbox loses focus in IE, while click doesn't trigger on keyboard events.

I use .toggleClass with a switch so that the highlight is guaranteed to be in sync with the checkbox state, despite the handler being triggered twice (once from change, once from click).

Finally, I immediately trigger the change event so that the classes are correctly applied on DOM ready.

Upvotes: 4

alex
alex

Reputation: 490143

jQuery

$('td :checkbox').change(function() {
    var parentTr = $(this).closest('tr');
    if (this.checked){
       parentTr.addClass('highlight');
    } else {
       parentTr.removeClass('highlight');
    }
});

There shouldn't be any need to explicitly check if the class is on the tr, the removeClass() will silently fail if the class isn't present.

I considered suggesting toggleClass(), (all these answers are wrong, apparently), but I was just covering the edge case if any of these checkboxes were either set on default or programmatically checked, then it would be out of sync (and I forgot about the second argument :P).

However, box9 has the best answer, so vote it. :)

CSS

tr.highlight td {
    background: yellow;
}

A tr's background is not visible, you must apply it to the child td.

jsFiddle.

Upvotes: 1

Sophie Alpert
Sophie Alpert

Reputation: 143114

Your only problem is that your <tr> is not in a <table>. If you add that, it works perfectly.

P.S. I'd replace $(this).parent().parent() with $(this).parents("tr").

$(document).ready(function() {
  $('td input:checkbox').click(function() {
    if ($(this).is(':checked')){
      $(this).parents("tr").addClass('highlight');
    } else if($(this).parents("tr").is('.highlight')) {
      $(this).parents("tr").removeClass('highlight');
    }
  }); 
});

Upvotes: 0

moe
moe

Reputation: 29704

$('td input[type="checkbox"]').click(function() {
        if ($(this).is(':checked')){
             $(this).parents('tr:eq(0)').addClass('highlight');
        } else {
             $(this).parents('tr:eq(0)').removeClass('highlight');
        }
    });

Upvotes: 0

Related Questions