<script type="text/javascript" charset="utf-8">    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        var newText = '<div style="display:inline"><table><tr style="font-size:10pt"><td class="td-0"> Person</td><td class="td-1">Ergebnis 1</td><td class="td-1">Ergebnis 2</td><td class="td-1">Ergebnis 3</td></tr></table> </div>';
 
        $('#question{QID} table.subquestion-list tr.ls-heading td:first-child').addClass('sub-question-header').html(newText);
    });
</script>

<style type="text/css">table {
  width:100%;
  color:black;
}
.td-0 {
  text-align:left !important;
  padding-left:2%;
  border:1px solid darkgray;
  width:40% !important;
}
.td-1 {
  border:1px solid darkgray;
  width:20% !important;
}
</style>

<div style="display:inline"><table><tr style="font-size:10pt"><td class="td-0">Anton Ameise</td><td class="td-1">{Q0b_Y001_X001}</td><td class="td-1">{Q0b_Y001_X002}</td><td class="td-1">{Q0b_Y001_X003}</td></tr></table>

<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
        var thisQuestion = $('#question{QID}');
    
        // Insert selects
        $('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
                                                    <option value="">Bitte, wählen...</option>\
                                                    <option value="1">----</option>\
                                                    <option value="2">---</option>\
                                                    <option value="3">--</option>\
                                                    <option value="4">-</option>\
                                                    <option value="5">0</option>\
                                                    <option value="6">+</option>\
                                                    <option value="7">++</option>\
                                                    <option value="8">+++</option>\
                                                    <option value="9">++++</option>\
                                                </select>');
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
  // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
     $('input[ name="{SGQ}Y001_X001"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y001_X002"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y001_X003"]').prop('readonly', true).css('text-align', 'center');
 
     $('input[ name="{SGQ}Y002_X001"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y002_X002"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y002_X003"]').prop('readonly', true).css('text-align', 'center');
 
     $('input[ name="{SGQ}Y003_X001"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y003_X002"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y003_X003"]').prop('readonly', true).css('text-align', 'center');
 
     $('input[ name="{SGQ}Y004_X001"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y004_X002"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y004_X003"]').prop('readonly', true).css('text-align', 'center');
 
     $('input[ name="{SGQ}Y005_X001"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y005_X002"]').prop('readonly', true).css('text-align', 'center');
     $('input[ name="{SGQ}Y005_X003"]').prop('readonly', true).css('text-align', 'center');
});
</script>

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
  });
</script>

<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 30% !important; }
  .custom-array table.subquestion-list thead .column-1 {  width: 30% !important; }
  .custom-array table.subquestion-list thead .column-2 {  width: 40% !important; }
</style>