Home/ Questions/Q 7948493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:44:15+00:00

I have the following table that contains checkboxes in each row. When checkbox status

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0