title: sum all values for table column based on class
body: <p>I'm trying to retrieve the sum of all values in a td based on a specific class. The code does not throw up any errors but my sum keeps resulting in "0".</p>
  
  <p>Do the numerical values have to be specified in a particular way? I saw some other answers here on SO from where have imitated the code, and i dont see any real difference between mine and theirs so im confused as to why mine isnt working.</p>
  
  <p>Here is a tutorial i followed for reference: <a href="http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html">http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html</a></p>
  
  <p>Here is my javascript</p>
  
  <pre><code>$(document).ready(function(){
  $('.price').each(function() {
      calculateSum();
  });
  });
  
   function calculateSum() {
  
  var sum = 0;
  //iterate through each td based on class and add the values
      $(".price").each(function() {
  
          //add only if the value is number
          if(!isNaN(this.value) &amp;&amp; this.value.length!=0) {
              sum += parseFloat(this.value);
          }
  
      });
  $('#result').text(sum);    
  };
  </code></pre>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;table border="1"&gt;
  &lt;tr&gt;
  &lt;th&gt;Item&lt;/th&gt;
  &lt;th&gt;Price&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Banana&lt;/td&gt;
  &lt;td class ="price"&gt;50&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Apple&lt;/td&gt;
   &lt;td class ="price"&gt;100&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>