如何在文本框中动态计算值

Question

如何在文本框中动态计算值

javascriptjqueryhtmlajax

5

我有一张发票，需要使用jQuery计算文本框中的某些值。

我对Jquery不是很了解，请帮助我解决这个问题。

在我的发票中有数量文本框，

如果用户输入数量，则动态显示计算价格即(total_subPrice= unit_price * quantity)在另一个名为“价格”的文本框中。

再次，所有价格的总和应作为总和显示在按钮中。

请检查我的下面的HTML代码，并在浏览器中运行它，然后您就会完全理解我的问题。

             <html>
        <body>
        <form name="invoice form" action="saveToDatabase.java">
        <table border="1" height="30%" width="30%">
        <tr>
        <td align="center" colspan="5">Customer Invoice</td>
        </tr>

        <tr>
            <td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
            <td width="25%" bgcolor="#CCCCCC">Item</td>
            <td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
            <td width="20%" bgcolor="#CCCCCC">Quantity</td>
            <td width="25%" bgcolor="#CCCCCC">Line Total<br/>(Price * Qnty)</td>  
        </tr>

        <tr>
            <td width="5%">1</td>
            <td width="25%">Iphone 5S</td>
            <td width="25%"><input type="text" value="400" name="unitprice1" size="4" disabled></td>
            <td width="20%"><input type="text" name="quantity1" value="2" size="2"/></td>
            <td width="25%"><input type="text" name="price1" value="400" size="4"/></td>  
        </tr>

        <tr>
            <td width="5%">2</td>
            <td width="25%">Ipad 2</td>
            <td width="25%"><input type="text" value="700" name="unitprice2" size="4" disabled></td>
            <td width="20%"><input type="text" name="quantity2" value="1" size="2"/></td>
            <td width="25%"><input type="text" name="price2=" value="700" size="4"/></td>  
        </tr>

        <tr>
            <td width="5%">1</td>
            <td width="25%">mp3</td>
            <td width="25%"><input type="text" value="50" name="unitprice1" size="4" disabled></td>
            <td width="20%"><input type="text" name="quantity1" value="3" size="2"/></td>
            <td width="25%"><input type="text" name="price1" value="150" size="4"/></td>  
        </tr>
        <tr>
        <td align="right" colspan="5">Total<input type="text" name="subtotal" value="1250" size="12" disabled/></td>
        </tr>
        </table>
        </form></body>
        </html>

- user1487400

你的HTML没有body标签，即使你使用HTML作为父标签。 - Jai

你在 .java 文件里做什么？ - joey rohan

@Jai 好的，我已经编辑过了。请帮我解决我的问题... - user1487400

@joeyrohan 在我的 .java 文件中，我将使用一些 Java 代码将所有这些值保存到我的数据库中。只是我在前端有疑问。如何计算这些值。 - user1487400

你应该给出结果，我无法理解这里发生了什么，我看到一些值，只能建议使用parseInt()来对这些值求和。 - user1794257

我已经给出了结果.. 在浏览器中运行我的代码... 你就会明白。 - user1487400

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bozdoz · Accepted Answer

我很喜欢通过实际例子来学习像jQuery这样的东西，所以我为你的问题做了一个例子，让你可以看到它是如何工作的：http://jsfiddle.net/bozdoz/LGyeq/ 逐行解析：

选择所有的输入标签，并在它们被改变时调用一个函数：

$('input').change(function(){

创建一个变量来存储总数，以计算小计：

var linetotals = 0;

选择所有具有 'lineTotal' 类的元素（我添加了这个类，以便我们可以选择它们）：

$('.lineTotal').each(function(){

通过在同一tr元素内查找输入元素（eq(#)分别获取第一个和第二个元素），获取价格和数量：

price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();

将 lineTotal 类元素设置为新的总数，并将总数添加到 lineTotals 变量中。

$(this).val(price*quantity);
linetotals += price*quantity;

将小计设置为linetotals变量的值：

});

    $('#total').val(linetotals);
});

这是一种你可以做到的方法。这与个人喜好有很大关系。希望这是一个良好的开始。

更新

关于提问者对更通用代码的新要求

使用CSS属性选择器选择输入字段。 JSFiddle已更新以下代码：

$('input').change(function(){
    var linetotals = 0;
    $('[name^="price"]').each(function(){
        price = $(this).parents('tr').find('input').eq(0).val();
        quantity = $(this).parents('tr').find('input').eq(1).val();
        $(this).val(price*quantity);
        linetotals += price*quantity;
    });
    $('[name=subtotal]').val(linetotals);
});