Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's another solution: <a href="http://jsfiddle.net/Ignitor/A4DVt/" rel="nofollow">FIDDLE</a></p> <p>The idea is to find out which column the input is in (using <code>.index()</code>) and hand that index on to the <code>overallPrice()</code> and <code>discountPrice()</code> functions.</p> <h3>HTML</h3> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;Option1&lt;/th&gt; &lt;th&gt;Option2&lt;/th&gt; &lt;th&gt;Option3&lt;/th&gt; &lt;th&gt;Option4&lt;/th&gt; &lt;/tr&gt; &lt;tr id="money"&gt; &lt;td&gt;Money&lt;/td&gt; &lt;td&gt;&lt;input type="number"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="upfront"&gt; &lt;td&gt;Upfront&lt;/td&gt; &lt;td&gt;&lt;input type="number"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="overallPrice"&gt; &lt;td&gt;Overall Price&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;/tr&gt; &lt;tr id="discount"&gt; &lt;td&gt;Discount&lt;/td&gt; &lt;td&gt;&lt;input type="number"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="discountPrice"&gt; &lt;td&gt;Dicount Price&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;/tr&gt; &lt;/table&gt; </code></pre> <h3>JavaScript</h3> <pre><code>$(document).ready(function () { $('input').change(function () { var $this = $(this), $row = $this.closest('tr'), $column = $this.closest('td'), columnIndex = $row.find('td').index($column[0]); //overallPrice(columnIndex); discountPrice(columnIndex); }); }); function overallPrice(column) { var cal1, cal2, result; cal1 = parseFloat($('#money td').eq(column).find('input').val() || '0'); cal2 = parseFloat($('#upfront td').eq(column).find('input').val() || '0'); result = cal1 - cal2; $('#overallPrice td').eq(column).text("£" + result); return result; } function discountPrice(column) { var cal1, cal2, result; cal1 = parseFloat($('#discount td').eq(column).find('input').val() || '0'); cal2 = overallPrice(column); result = cal2 - cal1; $('#discountPrice td').eq(column).text("£" + result); } </code></pre>
    singulars
    1. This table or related slice is empty.
    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