Adding Subheaders to a Dynamic Table

I would like to add subheaders to a question that is based off of a constructed list to break apart the question into categories. How do I dynamically insert a subheader into a table?


Since SSI Web v8, Sawtooth Software has utilized the jQuery JavaScript Library. jQuery gives us some powerful tools to easily target and modify portions our surveys.

Say we have a list of items that we want to break up into subheadings. This could be in a grid question, an select question, an ACBC or CBC question or whatever. We can insert a new row into our tables by targetting the row just after where we would like to insert the header and utilizing the .before() function in jQuery to insert a new row that will contain our header.

For example: In our list, we wrap out items in Span tags as follows:
Item 1 : <span class="alist">Aliens</span>
Item 2 : <span class="alist">Apples</span>
Item 3 : <span class="alist">Androids</span>
Item 4 : <span class="alist">Ambulances</span>
Item 5 : <span class="alist">Art</span>
Item 6 : <span class="blist">Basketballs</span>
Item 7 : <span class="blist">Boards</span>
Item 8 : <span class="blist">Blades</span>
Item 9 : <span class="blist">Bakeries</span>
Item 10 : <span class="blist">Banks</span>
Item 11 : <span class="clist">Camels</span>
Item 12 : <span class="clist">Corks</span>
Item 13 : <span class="clist">Cakes</span>
Item 14 : <span class="clist">Cinders</span>
Item 15 : <span class="clist">Capes</span>	
Wrapping our list items in tags allow us to add a class to each item that we can target using jQuery. Once we have these items specified, we can then add some jQuery code to our study to add the headers:
    $(".alist:first").closest("tr").before("<tr><td colspan='5' class='subheader'>A Header</tr></td>") 
    $(".blist:first").closest("tr").before("<tr><td colspan='5' class='subheader'>B Header</tr></td>") 
    $(".clist:first").closest("tr").before("<tr><td colspan='5' class='subheader'>C Header</tr></td>") 
The result of this code will give you subheaders in your table that is robust to whether some items are missing or even a whole category (e.g. all B items are missing). This code will not work properly if the list items from different categories are scrambled together.

Explanation of code

Line 1 tells the browser to interpret everything that follows this line as JavaScript code.

Line 2 contains a jQuery anonymous function that will only be executed once the page is fully loaded. This code is shorthand for $(document).ready(function(){

Line 3-5 There are three jQuery functions to note on each of these lines. First portion $(".alist:first") This selects only the first element that has class "alist". The second function .closest("tr"), broadens the selection by looking backwards to the nearest table row ("tr") element that is a parent of the current selector. Finally, the .before() function contains the code that we are inserting into the table. In this example, we are inserting a new row, a cell that spans 5 columns that contains the text of the header. I also chose to give the cell a class "subheader" so that I could style it using CSS later.

Line 6 closes the jQuery function.

Line 7 tells the browser that it should stop processing the JavaScript code.

Please note that this script will only work if this is the only question on the page and that it is using the default select question options.

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 337 7410

We are open!

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560

We're open!

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio