Alternating Row Background Colors for Matrix Question not including Statement Group Headers | XM Community
Skip to main content

How do I alternate background colors for rows in my constant sum matrix table, but only alternate colors of the rows that are specific questions to fill out and keep the colors of the statement group headings the same?

Try below code:

jQuery(".ChoiceRow.ReadableAlt").each(function(){if(jQuery(this).find(".Group").length==0)jQuery(this).css("background","#d9d9d9");});

 


Try below code:

jQuery(".ChoiceRow.ReadableAlt").each(function(){if(jQuery(this).find(".Group").length==0)jQuery(this).css("background","#d9d9d9");});

 

Thank you this worked! Do you know if there is a way to select a second background color to alternate? Moreover, I’m finding each group starts with a different color each time, is there a way to make each group start with the same color every time? @Shashi 


Try below code:

jQuery(".ChoiceRow.ReadableAlt").each(function(){if(jQuery(this).find(".Group").length==0)jQuery(this).css("background","#d9d9d9");});

 

Thank you this worked! Do you know if there is a way to select a second background color to alternate? Moreover, I’m finding each group starts with a different color each time, is there a way to make each group start with the same color every time? @Shashi 

Try this:

var f;
jQuery("#"+this.questionId+" th.Group").each(function(){
f=1;
jQuery(this).parent().nextAll(".ChoiceRow").each(function(i){
if(jQuery(this).find("th.Group").length==0){
if( i%2==0 && f==1)
jQuery(this).css("background","#d9d9d9");
}else
f=0;

});

});

 


Try below code:

jQuery(".ChoiceRow.ReadableAlt").each(function(){if(jQuery(this).find(".Group").length==0)jQuery(this).css("background","#d9d9d9");});

 

Thank you this worked! Do you know if there is a way to select a second background color to alternate? Moreover, I’m finding each group starts with a different color each time, is there a way to make each group start with the same color every time? @Shashi 

Try this:

var f;
jQuery("#"+this.questionId+" th.Group").each(function(){
f=1;
jQuery(this).parent().nextAll(".ChoiceRow").each(function(i){
if(jQuery(this).find("th.Group").length==0){
if( i%2==0 && f==1)
jQuery(this).css("background","#d9d9d9");
}else
f=0;

});

});

 

@Shashi this didn’t color any of the rows, should it be in addition to the previous code?


@Shashi this didn’t color any of the rows, should it be in addition to the previous code?

No, please attach screenshot where you have paste the code.


@Shashi this didn’t color any of the rows, should it be in addition to the previous code?

No, please attach screenshot where you have paste the code.

@Shashi 


Code should be pasted in the onload function like below:

 


Code should be pasted in the onload function like below:

 

@Shashi This worked!! Thank you so much!! One follow up question would be for the alternating colored rows, is there a way to set a second color to alternate between other than white for the rows, not including the group headers, and having the statements within each group both start on the same first color?


@Shashi This worked!! Thank you so much!! One follow up question would be for the alternating colored rows, is there a way to set a second color to alternate between other than white for the rows, not including the group headers, and having the statements within each group both start on the same first color?

Try this:

	var f;
jQuery("#"+this.questionId+" th.Group").each(function(){
f=1;
jQuery(this).parent().nextAll(".ChoiceRow").each(function(i){
if(jQuery(this).find("th.Group").length==0){
if( i%2==0 && f==1)
jQuery(this).css("background","#d9d9d9");
else
jQuery(this).css("background","#c4acac");
}else
f=0;

});

});

 


@Shashi This worked!! Thank you so much!! One follow up question would be for the alternating colored rows, is there a way to set a second color to alternate between other than white for the rows, not including the group headers, and having the statements within each group both start on the same first color?

Try this:

	var f;
jQuery("#"+this.questionId+" th.Group").each(function(){
f=1;
jQuery(this).parent().nextAll(".ChoiceRow").each(function(i){
if(jQuery(this).find("th.Group").length==0){
if( i%2==0 && f==1)
jQuery(this).css("background","#d9d9d9");
else
jQuery(this).css("background","#c4acac");
}else
f=0;

});

});

 

Worked! Thank you so much for all your help! @sha

 


Leave a Reply