Php 在另一个字段中显示两个输入字段的相乘结果，并使用jquery为页面上的每个其他字段使用相同的代码_Php_Jquery

Php 在另一个字段中显示两个输入字段的相乘结果，并使用jquery为页面上的每个其他字段使用相同的代码

php jquery

Php 在另一个字段中显示两个输入字段的相乘结果，并使用jquery为页面上的每个其他字段使用相同的代码,php,jquery,Php,Jquery,我在处理jQuery时遇到了一个障碍。我想做的是，我有三个输入字段（数量、价格、总计），当用户在数量和价格中输入值时，它们的相乘答案将显示在总计列中。到目前为止还不错但是，然后我又添加了两个具有相同名称和id的输入或行，当我输入第一个输入或行的值（数量、价格）时，结果将显示在名称输出的所有字段中。现在，我知道为什么会这样，因为我在脚本中使用了名称输出来显示结果，我知道我可以为字段指定不同的名称，我的代码也可以工作，但我必须为每一行编写脚本，我希望只使用一个脚本函数，并将其应用于每一行以及如何

我在处理jQuery时遇到了一个障碍。我想做的是，我有三个输入字段（数量、价格、总计），当用户在数量和价格中输入值时，它们的相乘答案将显示在总计列中。到目前为止还不错

但是，然后我又添加了两个具有相同名称和id的输入或行，当我输入第一个输入或行的值（数量、价格）时，结果将显示在名称输出的所有字段中。现在，我知道为什么会这样，因为我在脚本中使用了名称输出来显示结果，我知道我可以为字段指定不同的名称，我的代码也可以工作，但我必须为每一行编写脚本，我希望只使用一个脚本函数，并将其应用于每一行

以及如何在总计中显示总计的总和

摘要：我希望此代码能够像零售商店中的发票系统一样工作

<?php

?>
<html>
<head>
<script src="script/script.js"></script>
<script>
$(document).ready(function(){

$("#price").keyup(function(){
    var a=$("input[name='qty']").val();
    var b=$("input[name='price']").val();
    var r=$("input[name='output']").val(a * b);
});
});
</script>

</head>
<body>
<form method="POST">
<table style="border:1px solid purple">
    <tr>
    <th>Qty</th>
    <th>Price</th>
    <th>Total</th>
    </tr>

    <tr id="test">
    <td><input id="qty" type="text" name="qty"></td>
    <td><input id="price" type="text" name="price"></td>
    <td><input type="text" id="output" name="output"></td>
    </tr>
    <tr id="test">
    <td><input id="qty" type="text" name="qty"></td>
    <td><input id="price" type="text" name="price"></td>
    <td><input type="text" id="output" name="output"></td>
    </tr>
    <tr id="test">
    <td><input id="qty" type="text" name="qty"></td>
    <td><input id="price" type="text" name="price"></td>
    <td><input type="text" id="output" name="output"></td>
    </tr>
</table>
<div id="grand">
Grand Total:<input type="text" name="gran" id="gran">
</div>

</form>
</body>
</html>


$（文档）.ready（函数（）{
$（“#price”）.keyup（函数（）{
var a=$（“输入[name='qty']”）val（）；
var b=$（“输入[name='price']”）val（）；
var r=$（“输入[name='output']”）val（a*b）；
});
});
数量
价格
全部的
总计：

编写一个Javascript函数来循环输入元素，并更新total和grandtotal元素。

在适当的事件（如模糊或更改）上调用该函数。有关基本Javascript教程，请访问w3schools或codeacademy等基本网站。对于这样的功能，如果不掌握基本的Javascript或jQuery技能，就无法完成或完成很多工作

编写一个Javascript函数来循环输入元素，并更新total和grandtotal元素。

首先，代码中最重要的错误是您的ID重复。ID必须是完全唯一的；每页一张。行的ID相同，输入的ID相同。如果要在不同元素上共享同一引用，请使用类

那么，让我们从重写HTML开始：

<tr class="test">
    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input class="output" type="text" name="output[]"></td>
</tr>
<tr class="test">
    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input class="output" type="text" name="output[]"></td>
</tr>
<tr class="test">
    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input class="output" type="text" name="output[]"></td>
</tr>

如果要更新“总计”框，可以执行以下操作：

// declare variable outside of loop
var total = 0;

// loop each table row with class .test
$('.test').each(function() {
    var $row = $(this);
    var value = $row.find('.price').val() * $row.find('.qty').val();
    total = total + value;
});

$('#gran').val(total);

您可以将其添加到我在上面构建的函数中，也可以通过更新按钮运行它，这取决于您

这些想法可能会对你有所帮助，不幸的是，我没有时间给你一个完全有效的解决方案。然而，我已经把这个答案做成了一个社区维基，所以希望有人能来改进它

祝你好运。

首先，你的代码最重要的错误是你有重复的ID。ID必须是完全唯一的；每页一张。行的ID相同，输入的ID相同。如果要在不同元素上共享同一引用，请使用类

那么，让我们从重写HTML开始：

<tr class="test">
    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input class="output" type="text" name="output[]"></td>
</tr>
<tr class="test">
    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input class="output" type="text" name="output[]"></td>
</tr>
<tr class="test">
    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input class="output" type="text" name="output[]"></td>
</tr>

如果要更新“总计”框，可以执行以下操作：

// declare variable outside of loop
var total = 0;

// loop each table row with class .test
$('.test').each(function() {
    var $row = $(this);
    var value = $row.find('.price').val() * $row.find('.qty').val();
    total = total + value;
});

$('#gran').val(total);

您可以将其添加到我在上面构建的函数中，也可以通过更新按钮运行它，这取决于您

祝你好运。

我们使用输入字段名作为数组，如qty[]、price[]和output[]，然后使用jquery each循环遍历每个元素，并根据索引获取值

代码如下：

HTML:

<table style="border:1px solid purple">
    <tr>
        <th>Qty</th>
        <th>Price</th>
        <th>Total</th>
    </tr>
    <tr>
        <td><input class="qty" type="text" name="qty[]"></td>
        <td><input class="price" type="text" name="price[]"></td>
        <td><input class="output" type="text" name="output[]"></td>
    </tr>
    <tr>
        <td><input class="qty" type="text" name="qty[]"></td>
        <td><input class="price" type="text" name="price[]"></td>
        <td><input class="output" type="text" name="output[]"></td>
    </tr>
    <tr>
        <td><input class="qty" type="text" name="qty[]"></td>
        <td><input class="price" type="text" name="price[]"></td>
        <td><input class="output" type="text"  name="output[]"></td>
    </tr>
</table>
<div id="grand">
Grand Total:<input type="text" name="gran" id="gran">
</div>

$(document).ready(function() {
    $(".price").keyup(function() {
        var grandTotal = 0;
        $("input[name='qty[]']").each(function (index) {
            var qty = $("input[name='qty[]']").eq(index).val();
            var price = $("input[name='price[]']").eq(index).val();
            var output = parseInt(qty) * parseInt(price);

            if (!isNaN(output)) {
                $("input[name='output[]']").eq(index).val(output);
                grandTotal = parseInt(grandTotal) + parseInt(output);
                $('#gran').val(grandTotal);
            }
        });
    });
});

jsiddle链接：

我们使用输入字段名作为数组，如qty[]、price[]和output[]，然后使用jquery each循环遍历每个元素，并根据索引获取值

代码如下：

HTML:

<table style="border:1px solid purple">
    <tr>
        <th>Qty</th>
        <th>Price</th>
        <th>Total</th>
    </tr>
    <tr>
        <td><input class="qty" type="text" name="qty[]"></td>
        <td><input class="price" type="text" name="price[]"></td>
        <td><input class="output" type="text" name="output[]"></td>
    </tr>
    <tr>
        <td><input class="qty" type="text" name="qty[]"></td>
        <td><input class="price" type="text" name="price[]"></td>
        <td><input class="output" type="text" name="output[]"></td>
    </tr>
    <tr>
        <td><input class="qty" type="text" name="qty[]"></td>
        <td><input class="price" type="text" name="price[]"></td>
        <td><input class="output" type="text"  name="output[]"></td>
    </tr>
</table>
<div id="grand">
Grand Total:<input type="text" name="gran" id="gran">
</div>

$(document).ready(function() {
    $(".price").keyup(function() {
        var grandTotal = 0;
        $("input[name='qty[]']").each(function (index) {
            var qty = $("input[name='qty[]']").eq(index).val();
            var price = $("input[name='price[]']").eq(index).val();
            var output = parseInt(qty) * parseInt(price);

            if (!isNaN(output)) {
                $("input[name='output[]']").eq(index).val(output);
                grandTotal = parseInt(grandTotal) + parseInt(output);
                $('#gran').val(grandTotal);
            }
        });
    });
});

jsiddle链接：

试试下面的方法，应该可以

HTML:

尝试下面这样的方法，它应该会起作用

HTML:

使用输入字段名称作为数组，如

数量[]

价格[]

输出[]

，并根据index@DevendraBhandari，如何在jquery中使用html数组的索引？？对不起，我是个傻瓜。使用输入字段名作为数组，如

qty[]

price[]

output[]

并根据index@DevendraBhandari，如何在jquery中使用html数组的索引？？对不起，我是个傻瓜。事实上，我已经阅读了javascript和jquery的所有教程。我只是停留在我的想象中，如果不是太多的问题，你能给我一点关于如何做到这一点的代码提示吗？事实上，我已经阅读了javascript和jquery的所有教程。我只是停留在我的想象中，如果问题不太多，你能给出一些代码提示吗？它不起作用…我已经替换了javascript代码，但输出只显示在第一个代码中..我还复制粘贴了你的整个答案，它不起作用..让我创建JSFIDLE。@mastermind:请注意HTML Devendra提供给你的是因为重复的ID，所以和你的格式不一样。“你必须改变这个。”狗仔队我复制了智囊团提供的代码。让我来修复它。它不起作用…我已经替换了javascript代码，但输出只显示在第一个代码中..我还复制粘贴了您的整个答案，但它不起作用..让我创建JSFIDLE。@mastermind:请注意，HTML开发人员提供给您的与您的一样格式不正确，因为ID重复。“你必须改变这个。”狗仔队我复制了智囊团提供的代码。让我来修好。非常有用的解决方案，谢谢