Javascript 如何动态计算文本框中的值_Javascript_Jquery_Html_Ajax

Javascript 如何动态计算文本框中的值

javascript jquery html ajax

Javascript 如何动态计算文本框中的值,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有一张发票，我必须使用jquery在文本框中计算一些值我对Jquery了解不多。请帮我解决这个问题在我的发票中有数量文本框如果用户输入数量，则应动态显示计算价格，即总分项价格=单价*数量另一个文本框叫price 同样，所有价格的总和应在按钮中显示为总计请检查我下面的html代码，并在浏览器中运行它，然后您将完全理解我的问题 <html> <body> <form name="invoice fo

我有一张发票，我必须使用jquery在文本框中计算一些值

我对Jquery了解不多。请帮我解决这个问题

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

如果用户输入数量，则应动态显示计算价格，即总分项价格=单价*数量另一个文本框叫price

同样，所有价格的总和应在按钮中显示为总计

请检查我下面的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>

我喜欢看一些实用的例子来学习jQuery之类的东西，所以我为你的问题做了一个例子，让你看看它是如何工作的：

逐行：

选择所有输入标记，并在更改时调用函数：

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

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

})

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

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

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

这是你能做到的一种方法。这与偏好有很大关系。希望这是一个好的开始

使现代化回复：询问更多通用代码的新要求

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

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

您的html没有主体标记，即使您使用html作为父标记。您在.java文件中做什么？@Jai Okay我编辑过。请帮我解决我的问题…@joeyerohan在我的.java文件中，我将使用一些java代码将所有这些值保存到我的数据库中。。只是我前面有疑问。如何计算值..你应该给出结果，我无法理解这里发生了什么，我看到了一些值，我只能说，使用parseInt求和值这很好。但是我的页面在jsp Struts2Java框架中。我想用textbox的id解决我的问题。您已经使用了$'input'.changefunction{而不是应该使用一些输入字段id。而且我表单中的行数将是动态的，即用户可以选择许多要购买的项目。目前我在上面的html代码中仅显示3个项目。可能还有20个项目。请提供一些其他方法来解决此问题。我想你理解我的问题。我不理解。我的代码适用于任意数量的行。如您所说，使用输入字段id将使其无法处理更多数据。在我的jsp页面中，我编写而不是。这些项目值将根据用户对项目的选择从我的数据库中动态提交。@Ashutosh要使其更通用，请使用CSS属性选择器：；请参阅更新的JSFIDLE:；我使用d[name=subtotal]对于小计，例如。新疑问，在显示总计之前，我还希望在按钮处有一个文本框。文本字段名称折扣。如果用户输入折扣价格，则总价应再次反映，即总计=所有价格总和+折扣金额