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

Alternating Row Background Colors for Matrix Question not including Statement Group Headers

  • March 13, 2024
  • 10 replies
  • 190 views

Forum|alt.badge.img+2

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?

10 replies

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Level 8 ●●●●●●●●
  • 654 replies
  • March 13, 2024

Try below code:

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

 


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 11 replies
  • March 13, 2024

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 


Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Level 8 ●●●●●●●●
  • 654 replies
  • March 13, 2024

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;

});

});

 


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 11 replies
  • March 13, 2024

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
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Level 8 ●●●●●●●●
  • 654 replies
  • March 13, 2024

@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.


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 11 replies
  • March 13, 2024

@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 


Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Level 8 ●●●●●●●●
  • 654 replies
  • March 13, 2024

Code should be pasted in the onload function like below:

 


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 11 replies
  • March 13, 2024

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
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Level 8 ●●●●●●●●
  • 654 replies
  • March 13, 2024

@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;

});

});

 


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 11 replies
  • March 13, 2024

@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