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のようなものを自分で学ぶために実用的な例を見るのが好きなので、あなたの問題の例を作って、それがどのように機能するかを見ることができます:

1行ずつ：

すべての入力タグを選択し、変更されている場合は関数を呼び出します。

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

小計を計算するために、合計を格納する変数を作成します。

var linetotals = 0;

クラス「lineTotal」で各要素を選択します（選択できるように追加しました）：

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

同じ tr 要素内の入力要素を検索して、価格と数量を取得します (eq(#) はそれぞれ最初と 2 番目の要素を取得します)。

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);
});​

これはあなたがそれを行うことができる1つの方法です。好みと大きく関係しています。これが良いスタートになることを願っています。

アップデート

Re:より一般化されたコードに対するアスカーの新しいリクエスト

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 に答える