Question

我有一张发票，我必须使用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>

Answer 1

我喜欢看到实际的例子来自己学习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类元素设置为新的total，并将total添加到lineTotals变量中：

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

}）;

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

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

这是你可以做到的一种方式。它与偏好有很大关系。希望这是一个好的开始。

更新

Re：Askers对更通用代码的新请求

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

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

1 个答案:

更新