<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
 
    // Call the function to insert sub-titles
    // Parameters (Question ID, Row number, Sub-title)
    insertSubTitle(QQ, 1, 'Group 1');
    insertSubTitle(QQ, 3, 'Group 2');
    insertSubTitle(QQ, 6, 'Group 3');
 
    // A function to insert sub-title rows in an array
    function insertSubTitle(qID, row, subtitle) {
 
      // Add some row-specific classes
      $('#question'+qID+' table.question tbody[id^="javatbd"]').each(function(i, el){
        $(el).addClass('ansRow-'+(i+1));
      });
 
      // Find number of columns
      var cols = $('#question'+qID+' table.question tbody[id^="javatbd"]:first tr:first > *').length;
 
      // Define the row to be inserted
      var insertedRow = '<tbody> \
                  <tr class="insertedRow"> \
                    <td colspan="'+cols+'">'+subtitle+'</td> \
                  </tr> \
                </tbody>';
 
      // And insert the row
      $(insertedRow).insertBefore('#question'+qID+' .ansRow-'+row+'');
 
      // Fix up the row background colours
      var rowIndex = 0;
      $('#question'+qID+' table.question tr').each(function(i, el){
        rowIndex ++;
        if($(el).hasClass('insertedRow')) {
          rowIndex = 0;
        }
 
        $(el).removeClass('array1, array2');
 
        if(rowIndex % 2 == 0) {
          $(el).addClass('array1');
        }
        else {
          $(el).addClass('array2');
        }
      });
    }
 
  });
 
</script>

.insertedRow {
  background-color: #66CCCC;
  font-weight: bold;
}
 
.insertedRow td {
  text-align: left !important;
}