How can i make the whole row highlighted when a picklist value is changed?

Question

I have a page where used wrapper class to combine the checkbox and status (picklist field). so whenever the status is changed to another value the check box automatically gets selected. so, now i want to make the row highlighted when there is a change in the status.

Here is part of the Code:

<apex:outputPanel id="panelWithVar">
    <apex:variable value="{!0}" var="rowNumber" />
</apex:outputPanel>
<apex:form>
    <apex:pageBlock>
        <apex:pageBlockSection title="Case Update">
            <apex:outputPanel>
                <apex:outputLabel value="Case Type : Change" style="font-weight:bold" />
                <br/>
                <br/>
                <apex:outputLabel value="Case Sub-Type :" style="font-weight:bold" for="type" /> &nbsp;&nbsp;&nbsp;
                <apex:selectList value="{!changeType}" size="1">
                    <apex:selectOptions value="{!subTypes}" />
                    <apex:actionSupport event="onchange" action="{!caseRecords}" rerender="ajaxRequest,panelWithVar" />
                </apex:selectList>
            </apex:outputPanel>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="thePageblock">
        <apex:pageBlockButtons>
            <apex:commandButton value="Update" action="{!save}" reRender="thePage" status="updateStatus" />
            <apex:commandButton value="Cancel" action="{!Cancel}" />
            <apex:actionStatus id="updateStatus">
                <apex:facet name="start">
                    <img src="/img/loading32.gif" />
                </apex:facet>
            </apex:actionStatus>
        </apex:pageBlockButtons>
        <apex:outputPanel id="ajaxRequest">
            <apex:pageBlockTable value="{!wrapCaseList}" var="cseWrap" id="table" title="All Cases">
                <apex:column id="theColumnOne">
                    <apex:inputCheckbox value="{!cseWrap.selected}" id="inputId" />
                </apex:column>

Answer 1

It sounds like you effectively want to highlight rows in which the checkbox is checked.

You can do so by adding a conditional styleClass attribute to the <apex:column> that will apply when cseWrap.selected is true, like so:

<apex:column id="theColumnOne" styleClass="{!IF(cseWrap.selected, 'highlight', '')}" />

Then add CSS to your page to make the rows with the highlight class appear highlighted. E.g:

<style>
  .highlight { 
    background-color:yellow; 
  }
</style>

Answer 2

You can use also use inline styles to do this. Based on the value of cseWrap.selected the color will be yellow. Please not you have to add style="{!if(cseWrap.selected,'background-color:yellow;', 'color:black')}" for all <apex:column. Hope this helps.

<apex:column id="theColumnOne" style="{!if(cseWrap.selected,'background-color:yellow;', 'color:black')}"/>