多个计算，显示在同一页面上 [英] Multiple calculations, display on same page
问题描述
不知道该说些什么，但是我们会看您是否理解我的问题.
Not sure what to call this to be honest but we shall see if you get the point by my question.
我在标准HTML页面上有一个表格，并且使用Javascript/jQuery进行了一些计算.
I have a table on a standard HTML page and using Javascript/jQuery I have some calculations.
function addThem() {
var result;
result = userInput + 100;
return result;
}
这只是我拥有的一个简单(未完成)功能的示例.我想做的是获取用户输入，然后在表中显示结果.据我所知，我可以使用:
This is just an example of a simple (uncompleted) function I have. What I want to do is grab a user input and then display the result in a table. So as far as I know I can do this using:
document.getElementById("addThemResult").innerHTML = result;
，HTML将是:
<td id="addThemResult"></td>
我之前已经做过，并且可以正常工作.现在我的问题是，同一件事我将有多个字段，但不知道如何接受多个用户输入并使用同一功能显示它们.
I have done this before and it works. Now my problem is, I will have multiple fields for the same thing but have no idea how to accept multiple user inputs and display them using the same function.
我敢打赌我没有多大意义，所以我将尝试创建一个小例子.
I bet im not making much sense so I will try create a little example.
<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;
}
因此，如果我们看一下我所做的示例，如果您在"money-one"输入中输入一个值，它将在下面显示结果.我现在想做的是使用第二个输入并使用相同的函数在"money-two"中得到结果.
So if we look at the example I made, if you input a value into "money - one" input it will display the result below. What I now want to do is get the result in "money - two" using the second input and using the same function.
我将如何去做，请注意，我需要用到的东西要大得多，并且有大约6行.
How would I go about doing this, please note that what I need to use this for is a lot bigger and has around 6 rows of this.
我希望这是有道理的，任何帮助都会很大，这也许很简单，但是我似乎无法解决.
I hope this made some sense and any help would be great, it maybe a simple thing but I cant seem to get my head around it.
当我遇到更多问题时，我需要做的事情与我原本的看法有所不同.现在有更多投入，到处都有.其中一些需要在计算中使用，而另一些将在字段中显示结果
As I ran into more I needed to do it has changed from what I thought it was. Now there are more inputs and they are pretty much everywhere. Some of them need to be used in the calculations and others will display the result in a field
如您所见，无论您输入什么输入，结果都将始终改变.我需要停下来，我想指出它们应该去的地方以及何时应该改变.
As you can see the results will always change no matter what input you type in. I need that to stop and I want to point them where they should go and when they should change.
例如:
Money = 10000 so the field "cal1" for that column changes.
如果我随后输入里程输入:
If I then type in the miles input:
Miles = 2300 the "cal1" field should not change and "cal2" field should have the result.
我只能以这种方式来做，但是感觉很骗人.
I can only think to do it this way but it feels with a cheat.
因此，将类放在每个输入上，然后在该类上进行键入.
So putting class on each of the inputs then keyup on that class.
编辑:我仍然无法从同一列中的输入中获取值.另外，我认为我的作弊"方式行不通.
I am still not able to get the values from the inputs in the same column. Also I think my "cheat" way will not work.
对，我做了一个更好的例子，那是我的错，因为我没有做到应有的解释.
Right I made a better example, that was my fault because I didn;t explain it as well as it should have been.
在此示例中，您将看到有多个输入，但是它们仅在第一列中起作用(由于不知道如何使其他输入起作用).因此，现在我需要使用相同的功能在所有列上实现该功能.
In this example you will see that there are multiple inputs but they only work in the first column (due to no knowing how to make the others work). So now I need to get that working in ALL over columns using the same functions.
<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 due to the extra rows with inputs. The answers so far do not make it possible to fill in the second set of inputs in a column.
注意:将会有两组以上的输入，这只是一个示例.
Note: There will be more then 2 sets of inputs, this is just an example.
推荐答案
这对于任何数量的<td>都适用. >
this should work for any number of <td>'s .. just that the last table row should have an id.. in my case that is total
...
<tr id="total">
<td>Money Left</td>
<td></td>
<td></td>
</tr>
....
尝试
$(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);
}
以防万一，如果您无法修改HTML元素...没有id，则选择器应为
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);
});
});
但是我总是选择第一个id选择器..性能方面，第一个要好得多，因为id选择器速度很快，不必遍历DOM元素.
but i always go with the first id selector one .. performance wise , first one is far better since id selector is fast and don't have to traverse though the DOM elements.
这篇关于多个计算，显示在同一页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
