function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Irene SlessIrene Sless 

pageblockTable rows - hiding a row based on a checkbox

I need to loop through a table I have on a VF page and hide every row where a checkbox isn't ticked. The first col in each row has the checkbox. How can I do this - help please?

I have some Javascript on the page that used to do this before the table data was in a table, so it was easier then to do it per row, but it didn't look very nice. The table looks great but now I can't hide a row!
Irene SlessIrene Sless
This is what my table looks like. I need to toggle hide/show all the rows in the table where the checkbox is unchecked.
User-added image
Mudasir WaniMudasir Wani
Hi Irene,

You can use the rendered attribute.
It would be great if you can paste some sample code here.

What you can do put that code inside a panel and use the following code 
<apex:outputPanel rendered="{!checkBoxName__c}" >

 Please mark this as solution if this solves your problem, So that if anyone has this issue this post can help
Irene SlessIrene Sless
Hi Mudasir, thanks for helping :)
Below is my Javascript, and below that the pageblockTable code. The Javascript currently closes the entire table, as that's in the styleClass "cc_row", which is obviously not what I want. I don't know how to access a single row of the table, as the code only shows the apex:column. I need the <tr> section.

jCC$(".hideContacts").click(function() {
    var isChecked = this.checked;
    if(isChecked){
        jCC$(".cc_row").each(function() {
            var c = jCC$(this).find(".checkContact");
            if(c != undefined && !c.is(":checked")){
                jCC$(this).hide();
            }
        });
    }
    else{
        jCC$(".cc_row").show();
    }
});

<apex:pageblockTable styleClass="cc_row" width="95%" rowClasses="odd,even" value="{!activity.CallCycleActivity.CallCycleActivityContacts__r}" var="contact">
    <apex:column styleclass="cc_col5" headerValue="CRMGroup">
    <apex:inputCheckbox title="{!contact.Id}" value="{!contact.IsDisplayed__c}" styleClass="checkContact" onclick="updateDisplay(this, '{!contact.Id}');" />{!contact.Contact__r.AccredoCRMGroup__c}
    </apex:column>
    <apex:column styleclass="cc_col10" headerValue="Contact Name">
    <apex:outputLink value="{!contact.Contact__r.Id}" target="_blank">{!contact.Contact__r.Name}</apex:outputLink>
    </apex:column>
    <apex:column styleclass="cc_col10" headerValue="Phone Number" value="{!contact.Contact__r.Phone}"/>
    <apex:column styleclass="cc_col10" headerValue="Mobile Phone" value="{!contact.Contact__r.MobilePhone}"/>
    <apex:column styleclass="cc_col10" headerValue="Department" value="{!contact.Contact__r.Department}"/>
    <apex:column styleclass="cc_col10" headerValue="Title" value="{!contact.Contact__r.Title}"/>
    <apex:column headerValue="Alarm" value="{!contact.Contact__r.AccredoAlarms__c}"/>
</apex:pageblockTable>
Prady01Prady01
Hi Irene, I have tried this using page block table and column but the way the DOM buit by the browser will not let you what you want to achieve using Javascript but the below way is possible, I have just hidden the rows onclick on the link, Below is the entire code, Hope this help! 
//Apex Class
public with sharing class HideShowController {
public List<Account> accLst{get;set;}
public boolean check{get;set;}
    public HideShowController() {
        accLst = new List<Account>([select id,name, billingCity,billingcountry from Account Limit 10]);
    }   
}
<!-- VF page-->
<apex:page Controller="HideShowController" showHeader="false" sidebar="false">
<apex:form >
<style type="text/CSS">
.linkClass{
    cursor:pointer;
}
</style>
<script type="text/javascript">
    function hideRow(id){
        console.log(id);
        document.getElementById(id).parentNode.style.display = "none";
    }
</script>
    
    <apex:pageBlock title="Second Table">
        <table width= "100%">
        <tr>
            <th>Check</th>
            <th>Account Name</th>       
        </tr>
            <apex:repeat value="{!accLst}" var="ac">
                <tr id="tr-{!ac.Id}">
                    <td id="td-{!ac.id}" onclick="hideRow(this.id)"><a class="linkClass">Click to Hide</a></td> 
                    <td>{!ac.Name}</td>
                </tr>
            </apex:repeat>
        </table>
    </apex:pageBlock>
</apex:form>    
</apex:page>
You can copy paste the code in your Org and give it try.

Hope this helps.
Thanks
Prady