我正在建造一个购物车,每个产品至少有两种颜色和五种不同的尺寸。当有人订购此产品时,他必须填写以下表格:
<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的最简单方法是什么?
答案 0 :(得分:2)
看起来您可以将表中的所有输入相加。应该是:
var total = 0;
$.each($("input"),function(i, obj){
total += parseInt($(obj).val()) || 0;
});
if(total > 2){
return true;
}
return false;
如果你有其他讨厌的字段,你可以使用.find
table
元素来限制集合,或者使用更具体的输入选择器检查名称:
$("input[name^='qty_']")
修改强>
不得不解决两件事。我在导航obj, i
订单中each
,您需要i, obj
。
此外,必须使用|| 0
查看工作JSfiddle here
答案 1 :(得分:0)
这将显示每行上所有输入的总和
$( "table tbody tr" ).each( function() {
var sum = 0;
$(this).find( "td:gt(0) input[type=text]" ).each( function() {
sum += $(this).val() * 1;
});
alert(sum)
});