Have an idea?

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

How to add sub headers to a grid question


I have a grid with contain 13 rows and 1 column.  My client is asking for sub headers to be added.  One sub header appearing before row 1, another sub header appearing after row 6.

So the screen should look like

Sub header 1     -> the sub header should span the 2 columns                      
  answer 1                         check box
  answer 2                         check box
  answer 3                         check box
  answer 4
  answer 5
  answer 6
Sub header 2
  answer 7
  answer 8

I tried putting this code in the footer of my question but this didn't work

<script type="text/javascript">
jQuery (document).ready (function($) {
    $('QS5x_r1_row').before('<tr style="background-color:blue"> <td colspan="2">Sub header text<td></tr>');});


Thank you in advance for any help provided.
asked Mar 7, 2019 by Sandy

1 Answer

0 votes
You're really close.  Remember that when building a CSS selector, you have to add a pound symbol before IDs, like this:


On a tangential note, modern versions of Lighthouse Studio come with mobile grids.  If respondents may be taking your survey on a mobile device, you'll want to either (a) make sure your styling is satisfactory on mobile grids too, or (b) disable "Rows / Columns become separate questions on mobile" in your grid question's settings.
answered Mar 7, 2019 by Zachary Platinum Sawtooth Software, Inc. (146,475 points)
P.S.: I think you've got a "<td>" where you want a "</td>" in your script.
It works!  Thank you sooo much!