You need to sign in to do that
Don't have an account?
Sujendran 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>
Thank you.
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>
Thank you.
Please try below code and let me know if this works for you. If still need any modifications do let me know.
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
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.