可変数のhtmlテキスト入力の合計値を確認する

Question

私はショッピングカートを構築しており、製品ごとに少なくとも2色と5種類のサイズがあります。誰かがこの製品を注文するとき、彼は、次のフォームに記入することがあります。

<table cellspacing="0"> 
      <thead> 
       <tr> 
        <th class="tcl" scope="col">COLOUR/SIZE</th> 
        <th class="tc2" scope="col">34</th> 
        <th class="tc3" scope="col">36</th> 
        <th class="tcr" scope="col">38</th> 
        <th class="tcr4" scope="col">40</th> 
        <th class="tcr4" scope="col">42</th> 

        <th class="tcr4" scope="col">44</th> 
        <th class="tcr4" scope="col">48</th> 
       </tr> 
      </thead> 
      <tbody> 
      <tr class="tcl"> 
       <td class="tcl"> 
       <div class="intd"> 

        <div class="tclcon"> 
        <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-black-mlh-2e299d-pm.jpg" width="20" height="20" border="0" /><br /> 
        black</div> 
       </div> 
       </td> 
       <td class="tc2"><input type="text" name="qty_black_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tc3"><input type="text" name="qty_black_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr"><input type="text" name="qty_black_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 

       <td class="tcr4"><input type="text" name="qty_black_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_black_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_black_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_black_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
      </tr> 
      <tr class="tcl"> 
       <td class="tcl"> 
       <div class="intd"> 
        <div class="tclcon"> 

        <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-powder-mlh-e6847a-pm.jpg" width="20" height="20" border="0" /><br /> 
        powder</div> 
       </div> 
       </td> 
       <td class="tc2"><input type="text" name="qty_powder_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tc3"><input type="text" name="qty_powder_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr"><input type="text" name="qty_powder_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_powder_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 

       <td class="tcr4"><input type="text" name="qty_powder_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_powder_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_powder_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
      </tr> 
      <tr class="tcl"> 
       <td class="tcl"> 
       <div class="intd"> 
        <div class="tclcon"> 
        <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-red-mlh-959b5f-pm.jpg" width="20" height="20" border="0" /><br /> 

        red</div> 
       </div> 
       </td> 
       <td class="tc2"><input type="text" name="qty_red_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tc3"><input type="text" name="qty_red_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr"><input type="text" name="qty_red_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_red_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_red_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 

       <td class="tcr4"><input type="text" name="qty_red_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_red_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
      </tr> 
         </tbody> 
</table> 

だから私の入力フィールドは、この規則以下の名前が付けられます。"qty_" + "color name" + "size"。

入力値の合計が3以上であることを確認する最も簡単な方法はどれですか？

Answer 1

テーブルのすべての入力を合計するだけのようです。次のようになります。

var total = 0; 
$.each($("input"),function(i, obj){ 
    total += parseInt($(obj).val()) || 0; 
}); 
if(total > 2){ 
    return true; 
} 
return false; 

あなたがtable要素オフ.findを使用してセットを制限、または名前をチェックし、より具体的な入力セレクタを使用するか、他の厄介な分野持っていれば：

$("input[name^='qty_']") 

を

EDIT 2つのことを修正しなければならなかった。私はobj, iを持っていました。eachの注文で、i, objが必要です。 http：/

また、作業JSfiddle here

Answer 2

これは

$("table tbody tr").each(function() { 
    var sum = 0; 
    $(this).find("td:gt(0) input[type=text]").each(function() { 
     sum += $(this).val() * 1; 
    }); 
    alert(sum) 
});