+ Start a Discussion
Sujendran Sundarraj 8Sujendran Sundarraj 8 

nested pageblock table- apply css using jquery

Hello Guys, 
I have a requirement, I have account pageblock table (with contact pageblock table nested inside it). when I click on  one account row, it is getting highlighted but when I click on one row inside contact table it is not highlighted. Please check the below code and advise me to fix. 



<apex:page controller="accountrecordsgetting" >
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

$('.listener').click(function(){
$('.listener').each(function(){

$('tr').css("background-color", "none");
$('.sublistener').each(function(){
$('this').find('.sublistener').css("background-color", "none");


});

$('this').find('.sublistener').closest('tr').css("background-color", "yellow");


});
$(this).closest('tr').css("background-color", "yellow");
});


});
</script>
<apex:form >

<apex:pageblock >
  <apex:pageBlockTable value="{!acts}" var="a"  >
  
  <apex:column value="{!a.name}" styleClass="listener" />
    <apex:column value="{!a.id}" styleClass="listener"/>
    <apex:column breakBefore="true" colspan="3" >

    <apex:pageBlockTable value="{!a.contacts}" var="c" style="display: true;"  >
    <apex:column value="{!c.Id}" styleclass="sublistener" />
    <apex:column value="{!c.name}" styleclass="sublistener"  />
</apex:pageBlockTable>
</apex:column>
  </apex:pageBlockTable>
  </apex:pageblock>
  </apex:form>
</apex:page>


User-added image
Thank you.
Ajay K DubediAjay K Dubedi
Hi Sujendran,
Please try below code and let me know if this works for you. If still need any modifications do let me know.
<apex:page controller="AccountDataOnExcelSheetController" >
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
       
        $('.listener').click(function(){
            $('.listener').each(function(){
               
                $('tr').css("background-color", "none");
               
            });
            $(this).closest('tr').css("background-color", "yellow");
        });
       
        $('.sublistener').click(function(){
            $('.sublistener').each(function(){
                $('tr').css("background-color", "none");
            });
            $(this).closest('tr').css("background-color", "yellow");
        });
       
    });
   
    </script>
    <apex:form >
       
        <apex:pageblock >
            <apex:pageBlockTable value="{!cs}" var="a"  >
               
                <apex:column value="{!a.name}" styleClass="listener" />
                <apex:column value="{!a.id}" styleClass="listener"/>
                <apex:column breakBefore="true" colspan="3" >
                   
                    <apex:pageBlockTable value="{!a.contacts}" var="c" style="display: true;"  >
                        <apex:column value="{!c.Id}" styleclass="sublistener" />
                        <apex:column value="{!c.name}" styleclass="sublistener"  />
                    </apex:pageBlockTable>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageblock>
    </apex:form>
</apex:page>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi   
Sujendran Sundarraj 8Sujendran Sundarraj 8
Hello Ajay, 
Thank you for your swift response. 
My actual requirement is in the below link: 
https://developer.salesforce.com/forums/ForumsMain?id=9062I000000IKbkQAG
Thank you very much once again. 
Regards, 
Sujendran.