Coloring the alternate column in screener section

Question

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>

Answer 1

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>

Comments

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! :)