Javascript 多个计算，显示在同一页上

老实说，我不知道该怎么称呼这件事，但我们会看看你是否理解我的问题

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

例子： 这只是我拥有的一个简单（未完成）函数的示例。我要做的是获取用户输入，然后在表中显示结果。据我所知，我可以通过以下方式实现：

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

HTML将是：

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

因此，如果我们看一下我做的示例，如果您在“money-one”输入中输入一个值，它将显示下面的结果。我现在想做的是使用第二个输入和相同的函数得到“money-two”的结果

我该怎么做呢，请注意，我需要用它来做的是更大的，大约有6行

我希望这是有意义的，任何帮助都会很好，这可能是一件简单的事情，但我似乎不能让我的头围绕它

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

正如您所看到的，无论您键入什么输入，结果都将始终更改。我需要停止，我想告诉他们应该去哪里，什么时候应该改变

例如：

如果我随后输入英里数输入：

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

我只能想这样做，但感觉像是作弊

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

编辑：我仍然无法从同一列中的输入中获取值。而且我认为我的“欺骗”方式行不通

更新2： 对，我举了一个更好的例子，那是我的错，因为我没有；I don’我没有解释得那么好

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

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

---

注意：将有2组以上的输入，这只是一个示例。

使用

此

。还有一些关于身份证的规则：）

我建议您将结果字段命名为输入，并附加“left”。然后将

$（this）

作为输入发送到

cal

函数。它将是对触发

keyup

事件的元素的引用。要引用输出/结果单元格，请获取输入字段的ID并将其与“left”连接起来

希望能有帮助。代码未经测试：）

试试这个

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

还要更改id，因为它应该是唯一的

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

---

此答案利用表中相应列中的输入和输出，而不是像其他答案一样构造ID

HTML:

更新：

HTML:

---

这适用于任何数量的

。。只是最后一个表行应该有一个id。。在我的情况下，这是
total

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

以防万一，如果没有id无法修改HTML元素，则选择器应为

 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元素



第二个
id=“moneyleft1”
是否应该是
id=“moneyleft2”
？@Barmar抱歉，应该是的，我现在将更改它。很抱歉。当由
折扣价格
调用时，为什么需要在keyup处理程序中调用
总体价格
？@Barmar很好，但这是一个小“问题”？和这个问题对我来说有多大的问题相比。我不知道为什么我不能理解这一点。你的演示链接到我原来的一个（你应该改变它），但这看起来很有希望。让我拿一点钱。也不需要第二部分，那
ID
是一个输入错误。这将花费我一点时间来实现我的真实部分，所以不要等待。当我知道这是否对我有用时，我会发表评论。感谢您的快速回复！哈哈，鲁迪认为我们都只是坐在这里，屏住呼吸，等待OP让我们知道他对我们答案的看法。：）@巴玛，我是唯一一个这样做的人！？xD@Ruddy，我不是那个意思，我只是想帮你们，让你们能在更短的时间内解决问题……没关系：-）既然你们在传递一个jQuery对象，那个不应该是
parseFloat（input.val（））
？最后一行可能应该是
$（'#'+input.prop（'id'）+'left'）.text（…）关于
val（）
你说得对-我已经更新了。根据我的测试，您可以使用
attr（'ID'）
获取ID。使用
html（）
还是
text（）
没有多大关系。我不知道是否有任何性能差异，但由于
text（）
转义输入，速度可能会慢一些（？）。在以前版本的jQuery中，您可以使用
attr
获取ID，但我觉得他们希望我们使用
prop（）
。在任何情况下，您都需要预先编写一个
#
。我选择了
text（）
，因为这似乎是我想要的语义，但是
html（）
也会起作用（虽然没有大写：-）这样的例子会很好，因为我似乎无法运行它。更新和测试，请参阅演示。@Barmar我更新了我的问题（很多！），因为我在写问题时没有看到一些东西。如果你不知道如何推断我对你最新问题的答案，计算机编程对你来说太复杂了。只是多排一排，
$(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;
}

$(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);
}

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

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

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

}

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

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

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

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

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

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