2

重複の可能性：
jQueryを使用してテキストフィールド値を取得できません

ユーザーがテキストフィールドのアイテムの数を変更するときに、入力フィールドを変更しようとしています。ここでは、データベースからリストを繰り返し処理しています。次に、顧客の請求書を作成する必要があります。

私のコードでは、1つのアイテムの数量を変更すると、リスト内の他のすべてのアイテムに影響します。数量が変更された特定のアイテムのみを変更したい。

以下のコードは私にエラーを与えています。アイテム数量の1回の変更ですべてのアイテム値を変更しています。

私のコード:(新しいアップデート）

          <script type="text/javascript">
             $(document).ready(function(){  
                $(function() {        
                   $('input[name="quantity"]').change(function() {
                    var $tr = $(this).closest("tr");
                    var unitprice = $tr.find('input[name^="unitprice"]').val();  
                    $tr.find('input[name^="price"]').val($(this).val() * unitprice);
                }); 
                var totalPrice = 0;
                $('input[name="price"]').each(function(){
                    totalPrice += parseFloat(this.value);
                    $('[name=subtotal]').val(totalPrice);
                });
            }); 
        }); 
        </script>
         ..................
         ..................
         <tr>
            <td height="65%" valign="top" width="100%"> 
                <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                    <s:iterator  value="#session.BOK" status="userStatus">
                        <tr style="height: 10px;"> 
                            <td width="65%" align="left"><s:property value="bookTitile"/></td> 
                            <td width="10%" align="left"><s:textfield name="unitprice" value="%{price}" size="4"/></td>
                            <td width="10%" align="center"><s:textfield name="quantity" value="1" size="2"/></td>  
                            <td width="15%" align="center"><s:textfield name="price" value="%{price}" size="6"></s:textfield> </td>
                        </tr> 
                    </s:iterator>  
                </table>   
                </td>
            </tr> 
              <tr>
                   <td height="1%" valign="top" width="100%"> 
                          <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                       <tr style="height: 10px;"> 
                                           <td width="100%" align="right" colspan="5">   
                                                <s:textfield name="subtotal"  size="5"> </s:textfield>
                                          </td>
                                       </tr> 
                           </table>  
                 </td>
          </tr>

出力は次のようになります。

ここに画像の説明を入力してください

4

1 に答える 1

2

代わりにこれを試してください

<script type="text/javascript">
    $(function() {        
        $('input[name="quantity"]').change(function() {
            var $tr = $(this).closest("tr");
            var unitprice = $tr.find('input[name^="unitprice"]').val();  
            $tr.find('input[name^="price"]').val($(this).val() * unitprice);
        });
    });
</script>

更新：これは、計算された合計価格を返す関数です。必要に応じてご使用ください。

function calculateBasket() {
    var totalPrice = 0;
    $('input[name="price"]').each(function(){
        totalPrice += parseFloat(this.value);
    });

    return totalPrice;
}
于 2012-11-18T10:57:53.250 に答える