2
function myPicklistChanged(){
        var myPicklistElement = document.getElementById('{!$Component.theForm.thePageBlock.thePageBlockSection.myPicklist}');
        var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value;

        if (myPicklistValue == 'Biochemical Repack'){
            document.getElementByClass("Hidecolumn").style.visibility = "hidden";
            document.getElementByClass("Hidecolumn1").style.visibility = "hidden";
            document.getElementByClass("Hidecolumn2").style.visibility = "hidden";
            document.getElementByClass("Hidecolumn3").style.visibility = "hidden";
            document.getElementById("Hidecolumn4").style.visibility = "hidden";
            document.getElementById("Hidecolumn5").style.visibility = "hidden";
            }
        else if (myPicklistValue == 'AO Powder'){
            document.getElementById("Hidecolumn").style.visibility = "hidden";
            document.getElementById("Hidecolumn1").style.visibility = "hidden";
            document.getElementById("Hidecolumn2").style.visibility = "hidden";
            document.getElementById("Hidecolumn3").style.visibility = "hidden";
            document.getElementById("Hidecolumn4").style.visibility = "hidden";
            document.getElementById("Hidecolumn5").style.visibility = "hidden";
        }
        else if (myPicklistValue == 'AGT™ (Advanced Granulation)'){
            document.getElementById("Hidecolumn").style.visibility = "hidden";
            document.getElementById("Hidecolumn1").style.visibility = "hidden";
            document.getElementById("Hidecolumn2").style.visibility = "hidden";
            document.getElementById("Hidecolumn3").style.visibility = "hidden";
            document.getElementById("Hidecolumn4").style.visibility = "hidden";
            document.getElementById("Hidecolumn5").style.visibility = "hidden";
        }

In my custom VF page I have a table and I used this java script code for hide table row. I have more than 40 row and I do not want to use Id = "Hidecolumn,1,2,3,4,5," for every row. Is there any better way that i Can use One ID for all of the raw. I tried using a class document.getElementByClass("Hidecolumn").style.visibility = "hidden"; but it does not work . Any idea how to do that? Thanks

VF Page

<apex:inputField value="{!Product_Brief__c.Product_Format__c}" onchange="myPicklistChanged();" id="myPicklist"/>

<table id="table_section4" align="center">
                <tr>
                    <th>QUANTITY</th>
                    <th>UNIT SIZE FILL VOLUME</th> 
                    <th class="Hidecolumn">LIQUID<br/>PACKAGING</th>
                    <th>POWDER AGT<br/>PACKAGING</th>
                    <th>TOTAL<br/>VOLUME:</th>
                </tr>
                <tr>
                    <td><apex:inputField value="{!Product_Brief__c.Quantity1_1__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_1__c}"/></td> 
                    <td class="Hidecolumn"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_1__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_1__c}" /></td>
                    <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_1__c}"/></td> 
                </tr>
                <tr>
                    <td><apex:inputField value="{!Product_Brief__c.Quantity1_2__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_2__c}"/></td> 
                    <td class="Hidecolumn"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_2__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_2__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_2__c}"/></td>
                </tr>
                <tr>
                    <td><apex:inputField value="{!Product_Brief__c.Quantity1_3__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_3__c}"/></td> 
                    <td class="Hidecolumn"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_3__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_3__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_3__c}"/></td>
                </tr>
                <tr>
                    <td><apex:inputField value="{!Product_Brief__c.Quantity1_4__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_4__c}"/></td> 
                    <td class="Hidecolumn"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_4__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_4__c}"/></td>
                    <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_4__c}"/></td>
                </tr>

closed as off-topic by Adrian Larson, Eric, dphil, cropredy, Boris Bachovski Aug 11 '15 at 23:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – Adrian Larson, Eric, dphil, cropredy, Boris Bachovski
If this question can be reworded to fit the rules in the help center, please edit the question.

  • As I said in your previous (very similar) question - use jQuery. And use functions. – Brian Mansfield Aug 11 '15 at 15:35
  • Well i am not familiar with j query and I have no idea how to assign if (myPicklistValue == 'Biochemical Repack') in Jquery. Anyway ill try. thanks – Suneth Aug 11 '15 at 15:44
  • Can you also post your table code as well? Just wondering if you could use standard VF features to control visibility, instead of JavaScript. – AslamK Aug 11 '15 at 16:07
3

If you changed the ids to a class name of Hidecolumn, you could do something like this:

function myPicklistChanged(){
        var myPicklistElement = document.getElementById('{!$Component.theForm.thePageBlock.thePageBlockSection.myPicklist}');
        var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value;

        if (myPicklistValue == 'Biochemical Repack' || myPicklistValue == 'AO Powder' || myPicklistValue == 'AGT™ (Advanced Granulation)'){
            var TheColumns = document.getElementsByClassName("Hidecolumn");
            for (var i = 0; i < TheColumns.length; i++){
                TheColumns[i].style.visibility = "hidden";
            }
        }
  • 1
    Thank you very much. You save my lots of time and 100 of coding line. – Suneth Aug 11 '15 at 16:30
  • Not a problem, glad to help. – martin Aug 11 '15 at 16:31
  • when are you calling this function? is there an onchange event handler on the picklist? And have they all been given the Hidecolumn class? – martin Aug 11 '15 at 16:42
  • I made the changes, but its doing nothing. In my VF code I put like this <tr> <th class="Hidecolumn">LIQUID PACKAGING</th> </tr> <tr> <td><apex:inputField value="{!Produ_Brief__c.Unit_Size_Fill_Volume1_1__c}"/></td> <td class="Hidecolumn"><apex:inputField value="{!Produ_Brief__c.Liquid_Packaging1_1__c}"/></td> <td><apex:inputField value="{!Produ_Brief__c.Powder_AGT_Packaging1_1__c}" /></td> </tr> <tr> <td><apex:inputField value="{!Produ_Brief__c.Unit_Size_Fill_Volume1_2__c}"/></td> <td class="Hidecolumn"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_2__c}"/></td> – Suneth Aug 11 '15 at 16:48
  • I will add the VF section on my above code – Suneth Aug 11 '15 at 16:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.