title: Highlight click event with Table that has both row and column spans
body: <p>I have a table that is laid out as such:</p>
  
  <pre><code>+-----------------------------------------------------------+
  |         |   H1    |   H2    |   H3    |   H4    |   H5    |
  |         |         |         |         |         |         |          
  +-----------------------------------------------------------+
  |         |    |    |    |    |    |    |    |    |    |    |
  +-----------------------------------------------------------+
  |         |         |         |         |         |         |
  |    S1   |-------------------------------------------------+
  |         |         |         |         |         |         |
  +-----------------------------------------------------------+
  |         |         |         |         |         |         |
  |    S2   |-------------------------------------------------+
  |         |         |         |         |         |         |
  +-----------------------------------------------------------+
  |         |         |         |         |         |         |
  |    S3   |-------------------------------------------------+
  |         |         |         |         |         |         |
  +-----------------------------------------------------------+
  </code></pre>
  
  <p>I would like help implementing a way of pressing any of the <code>S1</code>, <code>2</code> or <code>3</code> cells (which have a <code>row span</code>) that all 'siblings' will be highlighted, much like:</p>
  
  <pre><code>+-----------------------------------------------------------+
  |         |XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|
  |    S3   |-------------------------------------------------+
  |         |XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|XXXXXXXXX|
  +-----------------------------------------------------------+
      ^
      |
    CLICKED HERE
  </code></pre>
  
  <p>If possible, I would also like to do this with my <code>H1 -&gt; H5</code> columns.</p>
  
  <p>I was looking at <a href="http://jsfiddle.net/DamianS1987/G2trb/" rel="nofollow">this</a>, but am not great with javascript/jquery that I couldn't alter it, only ever being able to 'break' its current functionality.</p>
  
  <p><strong>WARNING: Long snippet</strong> due to complexity of table</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.custTitle').click(function() {
      $(this).find('td').css("background-color", "red");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.makeInputWidth {
    width: 5em;
  }
  .rotateText {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    height: 7em;
    width: 6em;
  }
  .title {
    background-color: #808080;
  }
  table tr td {
    padding: 0;
  }
  table tr {
    padding: 0;
    border: 0;
  }
  /*  .qwerty{
          background-color:transparent;
          border: 1px solid transparent;
      }*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="thistable"&gt;
    &lt;tr&gt;
      &lt;th&gt;LOCATION&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;th colspan="2"&gt;H1&lt;/th&gt;
      &lt;th colspan="3"&gt;H2&lt;/th&gt;
      &lt;th&gt;H3&lt;/th&gt;
      &lt;th colspan="2"&gt;H4&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;PRODUCT&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;th class="rotateText"&gt;S1&lt;/th&gt;
      &lt;th class="rotateText"&gt;S2&lt;/th&gt;
      &lt;th class="rotateText"&gt;S3&lt;/th&gt;
      &lt;th class="rotateText"&gt;S4&lt;/th&gt;
      &lt;th class="rotateText"&gt;S5&lt;/th&gt;
      &lt;th class="rotateText"&gt;S6&lt;/th&gt;
      &lt;th class="rotateText"&gt;S7&lt;/th&gt;
      &lt;th class="rotateText"&gt;S8&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Product id&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
      &lt;th&gt;4&lt;/th&gt;
      &lt;th&gt;5&lt;/th&gt;
      &lt;th&gt;6&lt;/th&gt;
      &lt;th&gt;7&lt;/th&gt;
      &lt;th&gt;8&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th colspan="11"&gt;&amp;nbsp;&lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Customers&lt;/th&gt;
      &lt;th colspan="10"&gt;
        &lt;hr /&gt;
    &lt;/tr&gt;
    &lt;tr class="custTitle"&gt;
      &lt;th rowspan="2" class="title"&gt;Q1&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;th&gt;THIS&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;TEST&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;th colspan="11"&gt;
        &lt;hr /&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr class="custTitle"&gt;
      &lt;th rowspan="2" class="title"&gt;Q2&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;th&gt;THIS&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;TEST&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;th colspan="11"&gt;
        &lt;hr /&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr class="custTitle"&gt;
      &lt;th rowspan="2" class="title"&gt;Q3&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="text" class="makeInputWidth qwerty" /&gt;
      &lt;/td&gt;
      &lt;th&gt;THIS&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;&amp;nbsp;&amp;nbsp;&lt;/th&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;TEST&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;th colspan="11"&gt;
        &lt;hr /&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
  
  
  
  
  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Would anyone:</p>
  
  <ul>
  <li><strong>(A)</strong> Understand what I'm talking about, and</li>
  <li><strong>(B)</strong> Be able to implement this idea?</li>
  </ul>
  
  <p>Here Is a workable <a href="http://jsfiddle.net/jbutler483/xgf0mhxL/1/" rel="nofollow">JSFIDDLE</a></p>
  
  <p><strong>EDIT HISTORY</strong></p>
  
  <ul>
  <li><a href="http://jsfiddle.net/jbutler483/xgf0mhxL/" rel="nofollow">jsfiddle</a> added</li>
  <li><a href="http://jsfiddle.net/jbutler483/xgf0mhxL/1/" rel="nofollow">jsfiddle</a> updated</li>
  </ul>