GridLeftRight Header

Custom Function

by dixalex

HTML

<div class='rrQuestionContainer'>
  <span class="glh">Left Header Text</span><span class="grh">Right Header Text</span>
  <table summary="Please indicate the number from &quot;1&quot; to &quot;7&quot; that most accurately reflects your level of agreement with the following statements, where &quot;1&quot; indicates that &quot;STATEMENT 1 completely describes the way I think&quot;, and &quot;7&quot; indicates that &quot;STATEMENT 2 completely describes the way I think&quot;:&lt;span class='glh'&gt;Left Header Text&lt;/span&gt;&lt;span class='grh'&gt;Right Header Text&lt;/span&gt;"
  class="mrQuestionTable" style="width: 850px;">
    <tr>
      <td id="Cell.0.0" />
      <td id="Cell.1.0" class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 78px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">Statement 1<br/>Completely<br/>Describes Me<br/>1</span>
      </td>
      <td id="Cell.2.0" class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 78px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">2</span>
      </td>
      <td id="Cell.3.0" class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 78px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">3</span>
      </td>
      <td id="Cell.4.0" class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 78px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">In-Between<br/>4</span>
      </td>
      <td id="Cell.5.0" class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 78px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">5</span>
...

JavaScript

gridLeftRightColumnHeader();

			function gridLeftRightColumnHeader() {
			  if (($('.glh').length > 0) || ($('.grh').length > 0)) {
			    $('.rrQuestionContainer').each(function(j) {
			      if (($(this).find('span.glh').length > 0) || ($(this).find('span.glh').length > 0)) {
			        var $mrTable = $(this).find('table.mrQuestionTable:eq(' + j + ')');
			        var $tdfirst = $mrTable.find('td:first').addClass("targetRow");
			        var $tdlast = $('.targetRow').closest('tr').find('td:last');
			        var $glh = $(this).find($('.glh:eq(0)'));
			        var $grh = $(this).find($('.grh:eq(0)'));
			        var cssText = $mrTable.find('td.mrGridQuestionText:first').get(0).style.cssText;
			        var tdIndex = $tdfirst.index();
			        var tdLastIndex = $tdlast.index();

			        $glh.prependTo($tdfirst);
			        $tdfirst.addClass('mrGridQuestionText').attr('style', cssText);
			        $grh.prependTo($tdlast);
			        $tdlast.addClass('mrGridQuestionText').attr('style', cssText);

			        for (i = 0; i < $('table.mrQuestionTable:eq(' + j + ') tr').length; i++) {
			          if ($('table.mrQuestionTable:eq(' + j + ') tr:eq(' + i + ') td:eq(' + tdIndex + ')  > *').length === 0) {
			            $('table.mrQuestionTable:eq(' + j + ') tr:eq(' + i + ') td:eq(' + tdIndex + ')').addClass('leftRepeated');
			          } else {
			            //doNothing
			          }
			        }

			        for (i = 0; i < $('table.mrQuestionTable:eq(' + j + ') tr').length; i++) {
			          if ($('table.mrQuestionTable:eq(' + j + ') tr:eq(' + i + ') td:eq(' + tdLastIndex + ')  > *').length === 0) {
			            $('table.mrQuestionTable:eq(' + j + ') tr:eq(' + i + ') td:eq(' + tdLastIndex + ')').addClass('rightRepeated');
			          } else {
			            //doNothing
			          }
			        }

			        var repeatLeftHeader = $(this).find($('.glh:eq(0)')).clone().attr('class', 'clonedLeft');
			        var repeatRightHeader =...