Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Using <code>return false;</code> in a <code>$.each</code> loop will exit it. I think you meant for the <code>return false;</code> to be for the <code>click</code> handler - to prevent the default behavior of the <code>&lt;a&gt;</code> and stop the event propagation. So if you move the <code>return false;</code> out one level, it seems to work:</p> <pre><code>$(document).ready(function () { $('.calculate').on('click', function() { $('.hours-table tr').each(function() { var hours = $(this).find('input.hours').val(); var rate = $(this).find('input.rate').val(); var dateTotal = (hours * rate); $(this).find('input.date-total').val(dateTotal); }); //END .each return false; }); // END click }); </code></pre> <p><strong>DEMO:</strong> <a href="http://jsfiddle.net/Lr5pq/1/" rel="nofollow">http://jsfiddle.net/Lr5pq/1/</a></p> <p><strong>UPDATE:</strong></p> <p>The problem with getting <code>undefined</code> and <code>NaN</code> is because this is selecting all <code>&lt;tr&gt;</code> elements - that includes your header row:</p> <pre><code>&lt;tr&gt; &lt;th&gt;Hours&lt;/th&gt; &lt;th&gt;Hourly Rate&lt;/th&gt; &lt;th&gt;Date Total&lt;/th&gt; &lt;/tr&gt; </code></pre> <p>Since your loop was exiting immediately after the first (where the first row was the header row), any <code>console.log</code>/debugging was for the header row. So of course, there would be no elements found. To fix that, you should be using <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> to separate purpose. So your table should look like:</p> <pre><code>&lt;table class="hours-table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Hours&lt;/th&gt; &lt;th&gt;Hourly Rate&lt;/th&gt; &lt;th&gt;Date Total&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="hours"&gt;&lt;input type="text" class="hours" name="hours-01" value="" /&gt;&lt;/td&gt; &lt;td class="rate"&gt;&lt;input type="text" class="rate" name="rate-01" value="" /&gt;&lt;/td&gt; &lt;td class="date-total"&gt;&lt;input type="text" class="date-total" name="date-total-01" value="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>And your <code>tr</code> selector should be:</p> <pre><code>$('.hours-table').find('tbody').find('tr').each(function() { </code></pre> <p>(I like using <code>.find()</code> instead of a long selector, but the point is that you add the <code>tbody</code> part to target just the <code>&lt;tbody&gt;</code> rows)</p> <p><strong>DEMO:</strong> <a href="http://jsfiddle.net/Lr5pq/4/" rel="nofollow">http://jsfiddle.net/Lr5pq/4/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload