ACBC choice task: remove greyed-out background color?

Question

Hi,

I insert a row at run time for screener and choice task section. At choice task the row I am inserting is in grey background color even the levels are dissimilar. I tried the below code to remove the background color but it does not work.

 

<script type="text/javascript">
    $(document).ready(function() {
        
        $("tr td:contains('Upfront fees')").each(function() {
        $(this).siblings('td').css("background-color", "#FFFFFF");
        $(this).css("background-color", "#FFFFFF");
        });
     });
</script>

<style type="text/css"> 

Common level color code takes priority over this code, meaning this code works in other screens except the screen where the background grey color appears.

Note: I am inserting this row just above summed pricing level

Please help.

Comments

I can't reproduce your problem precisely without having the code you are using to insert a row, but looking at the ACBC Choice questions I can see that the background is applied with a "acbc_common_level" class.  Would removing that class suit you?

$(this).siblings().andSelf().removeClass('acbc_common_level');

---

I have 8 attributes and 8th attribute is the summed pricing attribute. I am inserting a row between 7th and 8th attribute. Here is the code I use to insert a row

<script>

$(document).ready(function() {
    

             var priceRowA = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-last-child(3)');
             $(priceRowA).after($(priceRowA).clone());
            
             var perPersonRow = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-last-child(3)');
             $(perPersonRow).find('.label_text_cell .label_text').text('Upfront fees');

         var $BrandrowA = $('.inner_table tr:eq(1)');
         var $BrandColumnsA = $BrandrowA.find('td');

         var $BrandrowB = $('.inner_table tr:eq(2)');
         var $BrandColumnsB = $BrandrowB.find('td');

         var $BrandrowC = $('.inner_table tr:eq(3)');
         var $BrandColumnsC = $BrandrowC.find('td');

         var $priceRow = $('.inner_table tr:nth-last-child(3)');
         var $priceColumns = $priceRow.find('td');
    
    
    
    for (var i = 1; i <= $priceColumns.length; i++) {
    
    var fprice=0;
    
    var strA = $BrandColumnsA[i].innerText.trim();
        var priceA = $BrandColumnsA[i].innerText.replace(/[^\d]/g, "");
        var nA = strA.includes("front");
        if (nA == true)
            {
        fprice = parseInt(fprice)+parseInt(priceA);
        }
        
    
    var strB = $BrandColumnsB[i].innerText.trim();
        var priceB = $BrandColumnsB[i].innerText.replace(/[^\d]/g, "");
        var nB = strB.includes("front");
        if (nB == true)
                {
        fprice = parseInt(fprice)+parseInt(priceB);
         }
        
    
    var strC = $BrandColumnsC[i].innerText.trim();
        var priceC = $BrandColumnsC[i].innerText.replace(/[^\d]/g, "");
        var nC = strC.includes("front");
        if (nC == true)
            {
        fprice = parseInt(fprice)+parseInt(priceC);
        }
        
        fprice = fprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        $priceColumns[i].innerHTML = "<div class='level_text'>" + '$' + fprice + "</div>"
        
    }
    

    
  
});
</script>

---

I see.  It looks like you're taking an existing table row, cloning it, and then inserting it back into the table.  The easiest change would probably be to remove the "acbc_common_level" class from the clone before inserting it.  Consider this modified version of your cloning code:

var priceRowA = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-last-child(3)');
var clone = $(priceRowA).clone();
$(clone).find('.acbc_common_level').removeClass('acbc_common_level');
$(priceRowA).after(clone);