Highlight Row of Matrix Table Based on Response | XM Community
Skip to main content

I have a matrix table that assesses various elements. For each question in the table, if the respondent selects, "Not Assessed" I would like to have that row highlighted. Is this possible?
image.png

jmborzick
You can use the below code to highlight the entire row:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var qid= this.questionId
jQuery('#'+this.questionId).find('tbody').click(function(){
var that =jQuery('td.c4').find('label.q-radio').length;

for (let i = 0; i < that; i++) {
var class1 =jQuery('td.c4').find('label.q-radio')[i].attributes[1].value;
console.log(class1)

if (class1 == "q-radio q-checked" || "q-radio q-focused q-checked") { 

document.getElementById(qid).querySelectorAll('tr.ChoiceRow'))i].style.backgroundColor="pink";
}
if (class1 == "q-radio")
{
document.getElementById(qid).querySelectorAll('tr.ChoiceRow'))i].style.backgroundColor='';
}
}
    });
}); 


Hope it helps!


Here is a more direct way:
Qualtrics.SurveyEngine.addOnload(function() {
this.questionclick = function(evt,el) {
if(el.type == "radio") {
var rb = jQuery(el);
var cr = rb.closest("tr");
if(el.checked && rb.closest("td").hasClass("c4")) cr.css("background-color","#FFE0EB");
else cr.css("background-color","transparent");
}
}
});


Thank you @TomG & @Deepak. Both solutions worked well. @Deepak's kept the alternate color formatting that I had in place via CSS.


Leave a Reply