CODEWITHSUNDEEP
jquery
LCJ
LCJ

Reputation: 22661

jQuery: Highlight Table Row on Checkbox Change Event

I have the following table that contains checkboxes in each row. When checkbox status is changes (checked/unchecked), the corresponding row need to be highlighted in yellow color. How can we achieve it using jQuery?

Note: I am using jQuery 1.4.1? "on" is not supported.

Note: I am trying to learn jQuery. Please do NOT suggest any third party plugin. I am trying to learn it though coding by hand.

<html>
<table class="commonGrid" cellspacing="0" id="detailContentPlaceholder_grdGarnishmentState"
style="border-collapse: collapse;">
<thead>
    <tr>
        <th scope="col">
            <a >
                Country Code</a>
        </th>
        <th scope="col">
            <a >
                State</a>
        </th>
        <th scope="col">
            Independent Order Status
        </th>
        <th scope="col">
            Standard Order Status
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            USA
        </td>
        <td>
            <span id="detailContentPlaceholder_grdGarnishmentState_lblState_0">Alaska</span>
        </td>
        <td>
            <span class="independantOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_0"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkIndependentOrderStatus"
                    checked="checked" /></span>
        </td>
        <td>
            <span class="standardOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_0"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkStandardOrderStatus"
                    checked="checked" /></span>
        </td>
    </tr>
    <tr style="background-color: #E5E5E5;">
        <td>
            USA
        </td>
        <td>
            <span id="detailContentPlaceholder_grdGarnishmentState_lblState_1">Arkansas</span>
        </td>
        <td>
            <span class="independantOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_1"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkIndependentOrderStatus" /></span>
        </td>
        <td>
            <span class="standardOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_1"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkStandardOrderStatus"
                    checked="checked" /></span>
        </td>
    </tr>
</tbody>
</table>
</html>

Upvotes: 0

Views: 7852

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Assumption based on your notes etc: Highlight a row in yellow when a checkbox changes.

$("table").on("change", ":checkbox", function() {
    $(this).parents("tr:first").css('background-color','yellow');
});

Effect: If a row checkbox changes, it highlights. Notes: Never changes to NOT be hightlighted once it IS highlighted in yellow.

EDIT: You COULD use a highlight class from your CSS such as .highlight{background-color:yellow;} however, on the second row, you would need to remove the background color style embedded there as that is more "specific" AND will always override the class added with .addClass('highlight');

previous versions syntax of a change event handler:

$("table").find(':checkbox').change( function() {
    $(this).parents("tr:first").css('background-color','yellow');
});

Slower .live handler for dynamic element addition:

$("table").find(':checkbox').live('change', function() {
    $(this).parents("tr:first").css('background-color','yellow');
});

EDIT2: There were a LOT of event management changes from 1.4.1 to 1.4.4.

It seems the change event is not firing for the 1.4.1 correctly - only fires on second change. SO, use the click event instead:

jQuery('input').click(function() {
    jQuery(this).parents("tr:first").css('background-color', 'yellow');
});

working example here: http://jsfiddle.net/vW9vQ/1/

BROKEN .change test here: http://jsfiddle.net/vW9vQ/

Highly recommend update to current release of jQuery on this stuff.

Upvotes: 1

Applehat
Applehat

Reputation: 668

Since everyone is ignoring your use of jQuery 1.4.1, here's an example that will work:

http://jsfiddle.net/applehat/F63Aj/1/

 $("input:checkbox").click(function ()
 {
     if($(this).is(':checked'))
     {
         $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
         $(this).parents("tr:first").css('background-color', 'yellow');
     }
     else
     {
         $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'));
     }
 });

You'll notice the JSFiddle link is uncluding jQuery 1.3 - so it if works on 1.3, it should easily work on 1.4.1.

Upvotes: 3

Royi Namir
Royi Namir

Reputation: 148744

try this :

http://jsbin.com/ozarov/3/edit

this will also save the row background-color in alternating style...

     $("table").on("click", ":checkbox", function ()
 {
     if($(this).is(':checked'))
     {
         $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
         $(this).parents("tr:first").css('background-color', 'yellow')
     }
     else
     {
         $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'))
     }
 });

p.s. you can elaborate my sample based on 2 checked checkboxes...

Upvotes: 2

Related Questions