Multiple calculations, display on one page

Question

Not sure what to call it honest, but we'll see if you get my question.

I have a table on a standard HTML page and using Javascript / jQuery I have some calculations.

Example:

function addThem() { var result; result = userInput + 100; return result; } 

This is just an example of a simple (incomplete) function that I have. What I want to do is grab user input and then display the result in a table. Therefore, as far as I know, I can do this using:

 document.getElementById("addThemResult").innerHTML = result; 

and HTML:

 <td id="addThemResult"></td> 

I have done this before and it works. Now my problem: I will have several fields for the same, but I have no idea how to accept multiple user inputs and display them using the same function.

Living example

I am sure that I will not make much sense, so I will try to create a small example.

EXAMPLE HERE

HTML:

 <table> <tr> <td></td> <td>One</td> <td>Two</td> </tr> <tr> <td>Money</td> <td> <input id="money1" /> </td> <td> <input id="money2" /> </td> </tr> <tr> <td>Money Left</td> <td id="moneyleft1"></td> <td id="moneyleft2"></td> </tr> </table> 

Javascript / jQuery:

 $(document).ready(function () { $('input').keyup(function () { cal(); }); }); function cal() { var cal1, result; cal1 = parseFloat(document.getElementById("money1").value); result = cal1 - 100; document.getElementById("moneyleft1").innerHTML = "£" + result; } 

So, if we look at the example that I did, if you enter the value in "money is one", it will display the result below. What I want to do now is get the result in "money-two", using the second input and using the same function.

How would I do this, please note that what I need to use for this is much larger and has about 6 lines of this.

Hope this made some sense, and any help would be wonderful, maybe a simple thing, but I can't circle it.

Update:

As I came across what I needed to do, this changed from what I thought. Now there are more resources, and they are almost everywhere. Some of them should be used in calculations, while others will display the result in the field.

UPDATE EXAMPLE

As you can see, the results will always change no matter what input you enter. I need to stop this, and I want to tell them where they should go, and when they should change.

eg:

 Money = 10000 so the field "cal1" for that column changes. 

If I then type in the input miles:

 Miles = 2300 the "cal1" field should not change and "cal2" field should have the result. 

I can only think about this, but he feels cheated.

CHEAT WAY?

Thus, put a class on each of the inputs, and then activate this class.

Edit: I still cannot get the values ​​from the inputs in the same column. Also, I think my cheat method will not work.

Update 2:

That's right, I made a better example, it was my mistake, because I did not explain it as well as it should have been.

In this example, you will see that there are several inputs, but they only work in the first column (due to the fact that they do not know how to make others work). So now I need to get this to work in ALL columns using the same functions.

UPDATE 2 EXAMPLE

HTML:

 <table> <tr> <th></th> <th>Option1</th> <th>Option2</th> <th>Option3</th> <th>Option4</th> </tr> <tr> <td>Money</td> <td> <input type="number" id="money" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> </tr> <tr> <td>Upfront</td> <td> <input type="number" id="upfront" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> </tr> <tr> <td>Overall Price</td> <td id="overallPrice"></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Discount</td> <td> <input type="number" id="discount" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> </tr> <tr> <td>Dicount Price</td> <td id="discountPrice"></td> <td></td> <td></td> <td></td> </tr> </table> 

Javascript / jQuery:

 $(document).ready(function () { $('input').keyup(function () { overallPrice(); discountPrice(); }); }); function overallPrice() { var cal1, cal2, result; cal1 = parseFloat(document.getElementById("money").value); cal2 = parseFloat(document.getElementById("upfront").value); result = cal1 - cal2; document.getElementById("overallPrice").innerHTML = "£" + result; return result; } function discountPrice() { var cal1, cal2, result; cal1 = parseFloat(document.getElementById("discount").value); cal2 = overallPrice(); result = cal2 - cal1; document.getElementById("discountPrice").innerHTML = "£" + result; } 

Its a little different from my first one due to extra lines with inputs. Answers still do not allow filling in the second set of entries in the column.

Note. There will be more than 2 sets of inputs, this is just an example.

Answer 1

this should work for any number of <td> .. just the last row of the table should have an identifier .. in my case it's total

 ... <tr id="total"> <td>Money Left</td> <td></td> <td></td> </tr> .... 

try it

  $(document).ready(function () { $('input').keyup(function () { cal(this); }); }); function cal(obj) { var result = parseFloat(obj.value) - 100; var tdPos=$(obj).parent().index(); $('#total').find('td:eq('+tdPos+')').html("£" + result); } 

just paste if you cannot change the HTML element ... without id, your selector should be

  function cal(obj) { var cal1, result; cal1 = parseFloat(obj.value); result = cal1 - 100; var tdPos=$(obj).parent().index(); //$('#total').find('td:eq('+tdPos+')').html("£" + result); //here $(obj).closest('tr').next().find('td:eq('+tdPos+')').html("£" + result); } 

 $(document).ready(function () { $('input').keyup(function () { var result = parseFloat(this.value) - 100; var tdPos=$(this).parent().index(); $('#total').find('td:eq('+tdPos+')').html("£" + result); }); }); 

but I always use the first identifier selector. Performance is wise, the first one is much better, since the id selector is fast and should not go through DOM elements.

the violin is here

Second fiddle

multi-column violin

Answer 2

Use this . And some rules for your identifiers :)

 $(document).ready(function () { $('input').keyup(function () { cal($(this)); }); }); function cal(input) { var cal1 = parseFloat(input.val()), result = cal1 - 100; $('#' + input.attr("id") + "left").html("£" + result); } 

What I am suggesting here is that you name your result fields, as your inputs, and add "left". Then you send $(this) as an input to your cal function. This will be a reference to the element on which the keyup event was keyup . To refer to the output / result cell, you get the identifier of the input field and combine it with the "left" one.

Hope this helps. Code not verified :)

Answer 3

try it,

 $(document).ready(function () { $('input').keyup(function () { cal(this); }); }); function cal(obj) { var cal1, result; cal1 = parseFloat(document.getElementById(obj.id).value); result = cal1 - 100; if(obj.id=='money1'){ document.getElementById("moneyleft1").innerHTML = "£" + result; }else{ document.getElementById("moneyleft2").innerHTML = "£" + result; } } 

Also change the identifier as it must be unique.

 <td id="moneyleft1"></td> <td id="moneyleft2"></td> 

Updated DEMO

For a few <td> you should try this

 function cal(obj) { var cal1, result; cal1 = parseFloat(document.getElementById(obj.id).value); result = cal1 - 100;var $this = $(this); var cellIndex = $(obj).parent().index(); $(obj).closest('tr').next().children().eq(cellIndex).html("£"+result); } 

NEW DEMO

Answer 4

This answer uses the inputs and outputs found in the corresponding columns of the table, instead of creating identifiers such as other answers.

HTML:

 <tr id="money"> <td>Money</td> <td> <input /> </td> <td> <input /> </td> </tr> <tr id="moneyleft"> <td>Money Left</td> <td></td> <td></td> </tr> 

JS:

 $(document).ready(function () { $("#money input").keyup(function () { var pos = $(this).parent().index(); var result = parseFloat($(this).val()) - 100; $("#moneyleft").children().eq(pos).text("£" + result); }); }); 

Demo

UPDATE:

HTML:

 <table> <tr> <th></th> <th>Option1</th> <th>Option2</th> <th>Option3</th> <th>Option4</th> </tr> <tr id="money"> <td>Money</td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> </tr> <tr id="upfront"> <td>Upfront</td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> </tr> <tr id="overallPrice"> <td>Overall Price</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr id="discount"> <td>Discount</td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> </tr> <tr id="discountPrice"> <td>Dicount Price</td> <td></td> <td></td> <td></td> <td></td> </tr> </table> 

JS:

 $(document).ready(function () { $("input").keyup(function () { var pos = $(this).parent().index(); overallPrice(pos); discountPrice(pos); }); }); function overallPrice(index) { var money = parseFloat($("#money").children().eq(index).find("input").val()); var upfront = parseFloat($("#upfront").children().eq(index).find("input").val()); var result = money - upfront; $("#overallPrice td").eq(index).text("£" + result); return result; } function discountPrice(index) { var discount = parseFloat($("#discount").children().eq(index).find("input").val()); var overall = overallPrice(index); var result = overall - discount; $("#discountPrice td").eq(index).text("£" + result); return result; } 

Demo