title: Optimizing Jquery iteration through table columns comparing with existing row
body: <p>I'm trying to write a function to add color to a table based on a reference which is one of the top rows of the table. There are several questions in SO mentioning row based iteration but not so much about column.</p>
  
  <p>The structure of the table is something like:</p>
  
  <pre><code>&lt;table id="data"&gt;
      &lt;tr&gt;
          &lt;th rowspan="2"&gt;Name&lt;/th&gt;
          &lt;th rowspan="2"&gt;Selection&lt;/th&gt;
          &lt;th rowspan="2"&gt;Title&lt;/th&gt;
          &lt;th rowspan="2"&gt;Info1&lt;/th&gt;
          &lt;th rowspan="2"&gt;Info2&lt;/th&gt;
          &lt;th colspan="10"&gt;Data&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;001&lt;/th&gt;
          &lt;th&gt;002&lt;/th&gt;
          &lt;th&gt;003&lt;/th&gt;
          &lt;th&gt;004&lt;/th&gt;
          &lt;th&gt;005&lt;/th&gt;
          &lt;th&gt;006&lt;/th&gt;
          &lt;th&gt;007&lt;/th&gt;
          &lt;th&gt;008&lt;/th&gt;
          &lt;th&gt;009&lt;/th&gt;
          &lt;th&gt;010&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr id="ref_control"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;RefName&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;A&lt;/td&gt;
          &lt;td&gt;B&lt;/td&gt;
          &lt;td&gt;J&lt;/td&gt;
          &lt;td&gt;L&lt;/td&gt;
          &lt;td&gt;Z&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="checkbox" name="checkbox"/&gt;&lt;/td&gt;
          &lt;td&gt;Entity 1&lt;/td&gt;
          &lt;td&gt;Info...&lt;/td&gt;
          &lt;td&gt;More info...&lt;/td&gt;
          &lt;td&gt;Even more...&lt;/td&gt;
          &lt;td&gt;A&lt;/td&gt;
          &lt;td&gt;T&lt;/td&gt;
          &lt;td&gt;M&lt;/td&gt;
          &lt;td&gt;L&lt;/td&gt;
          &lt;td&gt;Z&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      (...)
  &lt;/table&gt;
  </code></pre>
  
  <p>In addition I'm using JQuery and the <a href="http://www.bramstein.com/projects/column/" rel="nofollow">JQuery column cell select plugin</a> to perform the mentioned task.</p>
  
  <p>The Javascript code looks like this:</p>
  
  <pre><code>$(document).ready(function() {
      // Colorize table based on matches
      // Number of Data entries - Count on the reference (2nd row)
      // and only 5th column onwards (index starts at 0)
      var datasize = $("#data tr:eq(2) td:gt(4)").length;
  
      // Start with column 6 (index starts at 1)
      var begin = 6;
  
      for (var i = begin; i &lt; begin + datasize; ++i) {
          var curCol = $("#data td").nthCol(i);
          var ref = curCol.eq(0).text();
          curCol.not(curCol.eq(0)).each(function() {
              var data = $(this);
              if (data.text() == '') {
                  data.addClass("black");
              } else if (data.text() != ref) {
                  data.addClass("color");
              }
          });
      }
  });
  </code></pre>
  
  <p>A working example can be visualized <a href="http://jsbin.com/enezo3/3" rel="nofollow">here</a>. In the example the table has only 9 rows and 10 data columns. The actual page I'm trying to optimize has 20 rows and 90 data columns.</p>
  
  <p>Using the mentioned Javascript extensions/plugins the big sized table poses no threat to the Google Chrome browser taking a few seconds to load, however Opera, Firefox and Internet Explorer have a hard time running the function or end up asking for user interaction to stop the script from running.</p>
  
  <p>So my question is aimed at both alternatives to the <a href="http://www.bramstein.com/projects/column/" rel="nofollow">column select plugin</a> or ways to optimize the code such that I don't kill almost all browsers except Google Chrome.</p>
  
  <p><strong>Edit</strong>: Changes according the the two comments from @Pointy</p>