title: javascript Count class occurrences per table row and summarize in another table
body: <p>The table below identifies successes and failures using color codes:Green means success,Red means failure.  </p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;th&gt;mon&lt;/th&gt;
          &lt;th&gt;tue&lt;/th&gt;
          &lt;th&gt;Wed&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Tom&lt;/td&gt;
              &lt;td class="miss"&gt;&lt;/td&gt;
              &lt;td class="hit"&gt;&lt;/td&gt;
              &lt;td class="miss"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Dick&lt;/td&gt;
              &lt;td class="hit"&gt;&lt;/td&gt;
              &lt;td class="hit"&gt;&lt;/td&gt;
              &lt;td class="miss"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Harry&lt;/td&gt;
              &lt;td class="miss"&gt;&lt;/td&gt;
              &lt;td class="miss"&gt;&lt;/td&gt;
              &lt;td class="hit"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This next table gives a summary of successes and failures per person</p>
  
  <pre><code>&lt;table id="summary"&gt;
      &lt;thead&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Hits&lt;/th&gt;
          &lt;th&gt;misses&lt;/th&gt;
          &lt;th&gt;% compliance&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Tom&lt;/td&gt;
              &lt;td id="success"&gt;&lt;/td&gt;
              &lt;td id="failed"&gt;&lt;/td&gt;
              &lt;td id="percentage"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Dick&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Harry&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The Javascript below is supposed to get a count of class occurrences per name</p>
  
  <pre><code>$(function () {
      var $rows = $("#summary tbody tr");
  
      $rows.each(function (n) {
          $("#failed").html('&lt;b&gt;' + $('tr .miss').length + '&lt;/b&gt;');
          $("#success").html('&lt;b&gt;' + $('tr .hit').length + '&lt;/b&gt;  ');
          var total = $('.hit').length + $('.miss').length;
          var completed = $('.hit').length;
          var compliance = parseInt(completed * 100 / (total));
          $("#percentage").html('&lt;b&gt;' + compliance + ' % &lt;/b&gt;');
      });
  });
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>td.hit {
      background-color:#76F33A !important;
  }
  td.miss {
      background-color:#FF0F0F !important;
  }
  </code></pre>
  
  <p>I want to get css class count per row in the summary table?</p>