老实说，我不确定该怎么调用它，但我们会看看您是否理解我的问题。

我在标准 HTML 页面上有一个表格，我使用 Javascript/jQuery 进行了一些计算。

示例:

function addThem() {
    var result;

    result = userInput + 100;
    return result;
}

这只是我拥有的一个简单(未完成)功能的示例。我想要做的是获取用户输入，然后将结果显示在表格中。据我所知，我可以使用:

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

HTML 将是:

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

我以前做过，效果很好。现在我的问题是，我将有多个字段用于同一事物，但不知道如何接受多个用户输入并使用相同的函数显示它们。

实例

我敢打赌我没有多大意义，所以我会尝试创建一个小例子。

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;
}

所以如果我们看一下我做的例子，如果你在“money - one”输入中输入一个值，它会显示下面的结果。我现在想要做的是使用第二个输入并使用相同的函数得到“money - two”的结果。

我该怎么做呢，请注意，我需要用它来做的事情要大得多，大约有 6 行。

我希望这是有道理的，任何帮助都会很好，这可能是一件简单的事情，但我似乎无法理解它。

更新:

当我遇到更多我需要做的事情时，它已经从我想象的改变了。现在有更多的输入，它们几乎无处不在。其中一些需要在计算中使用，另一些将在字段中显示结果

UPDATE EXAMPLE

如您所见，无论您输入什么内容，结果总是会发生变化。我需要它停止，我想指出它们应该去哪里以及何时应该改变。

例如:

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

如果我然后输入英里输入:

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

我只能这么想，但感觉有点作弊。

CHEAT WAY?

因此将类放在每个输入上，然后在该类上键入。

编辑:我仍然无法从同一列的输入中获取值。我也认为我的“作弊”方式行不通。

更新 2:

对，我举了一个更好的例子，那是我的错，因为我没有把它解释得很好。

在此示例中，您将看到有多个输入，但它们仅在第一列中起作用(因为不知道如何使其他列起作用)。所以现在我需要使用相同的函数在所有列中工作。

UPDATE 2 EXAMPE

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;
}

由于带有输入的额外行，它与我的第一个略有不同。到目前为止的答案无法在列中填写第二组输入。

注意:会有2组以上的输入，这只是一个例子。

最佳答案

这应该适用于任意数量的 <td>的 .. 只是最后一个表行应该有一个 id .. 在我的例子中是 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 元素。

fiddle here

2nd fiddle

fiddle with multiple columns

关于javascript - 多次计算，同页显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20700435/