Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Coloring the alternate column in screener section

This is the code I was using to color the alternate column in screener section and it is working fine if I use 'oceanic' survey style but coloring is not working if I change the survey style to 'Default style'. The code 'bgcolor' is not working. Please help me to correct the code.
 
<script>
$(document).ready(function(){
    var scnum=$('tr.acbc_task_top_row > td').length - 1;
    var topRowHtml = '<tr><td></td>';
    for (i = 1; i <= scnum; i++)
    {
      if ([%ACBCCurrentScreener()%] % 2 == 1 && i % 2 == 1) {
        topRowHtml += '<td bgcolor="#E0E0E0"><center><font size="3"><b>Offering ' + i + '</b></font></center></td>';
      }
      else if ([%ACBCCurrentScreener()%] % 2 == 1 && i % 2 == 0) {
        topRowHtml += '<td bgcolor="#C3C3C3"><center><font size="3"><b>Offering ' + i + '</b></font></center></td>';
      }
      else if ([%ACBCCurrentScreener()%] % 2 == 0 && i % 2 == 1) {
        topRowHtml += '<td bgcolor="#C3C3C3"><center><font size="3"><b>Offering ' + i + '</b></font></center></td>';
      }
      else if ([%ACBCCurrentScreener()%] % 2 == 0 && i % 2 == 0) {
        topRowHtml += '<td bgcolor="#E0E0E0"><center><font size="3"><b>Offering ' + i + '</b></font></center></td>';
      }
    
    }
    topRowHtml += '</tr>';
    $('.acbc_screener > .question_body > table > tbody').prepend(topRowHtml);
})
</script>

asked Dec 2, 2021 by Abdul Bronze (3,220 points)

1 Answer

+1 vote
Your CSS rule appears to be getting overrode by a built-in rule that exists in the default style.  Fighting CSS rules with inline styling can be a little frustrating.  I would suggest that we edit the HTML to apply classes to the table cells instead:

topRowHtml += '<td class="header_color1"><center><font size="3"><b>Offering ' + i + '</b></font></center></td>';


topRowHtml += '<td class="header_color2"><center><font size="3"><b>Offering ' + i + '</b></font></center></td>';


Then we can follow up this JavaScript with a CSS block to apply the background colors:

<style>
td.header_color1 {
    background-color: #E0E0E0;
}

td.header_color2 {
    background-color: #C3C3C3;
}
</style>
answered Dec 2, 2021 by Zachary Platinum Sawtooth Software, Inc. (201,975 points)
Thanks Zachary
This thread was very helpful Zachary and Abdul! it works very well for me with the changes by Zachary, so thanks a lot! :)
...