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

1 回答 1

3

我喜欢看实际的例子来学习像 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);
});​
于 2012-11-17T11:58:25.103 回答